TypeScript异步函数forEach内调用异步函数返回Promise异常求助

我来帮你拆解这个异步开发里的常见坑，以及给出可行的解决方案。

问题根源 #

你遇到的核心问题在于：forEach方法本身不支持异步操作的等待——哪怕你把forEach的回调函数标记为async，forEach也会直接遍历完所有元素，不会等待每个回调里的await执行完成。这就导致两种糟糕的结果：

1. 你期望的返回值变成了一堆未resolved的Promise；
2. 当你试图让forEach回调异步时，整个getAllProperties函数可能在所有异步操作完成前就提前返回，最终拿到错误的不完整数据。

针对你的代码的解决方案 #

结合你给出的代码片段，这里提供两种最常用的修复方式：

方案1：用for...of循环替代forEach（顺序执行）

如果你的异步操作需要按顺序执行（比如前一个操作完成后再执行下一个），for...of是最直观的替代方案，它天然支持await：

private getAllProperties = async (props?: IPageDetailsProps) => {
  props = props || this.props;
  let web = new Web(props.context.pageContext.web.absoluteUrl);
  let id = 2;
  // 假设你原本要遍历的是某个属性数组，比如pagePropertyList
  const pagePropertyList = [/* 你的目标遍历数组 */];
  const pageProps = [];

  // 用for...of替代forEach，确保每个异步操作完成后再进行下一个
  for (const propItem of pagePropertyList) {
    // 等待当前异步操作完成，再将结果存入数组
    const fetchedProp = await web.someAsyncPropertyMethod(id, propItem);
    pageProps.push(fetchedProp);
  }

  // 这里的pageProps就是完整的已处理数据
  return pageProps;
};

方案2：用Promise.all + map实现并行执行（更高效率）

如果你的异步操作之间没有依赖关系，可以并行执行来提升性能。用map把每个遍历项转换成Promise，再用Promise.all等待所有Promise完成：

private getAllProperties = async (props?: IPageDetailsProps) => {
  props = props || this.props;
  let web = new Web(props.context.pageContext.web.absoluteUrl);
  let id = 2;
  const pagePropertyList = [/* 你的目标遍历数组 */];

  // map生成Promise数组，Promise.all等待所有异步操作完成
  const pageProps = await Promise.all(
    pagePropertyList.map(async (propItem) => {
      return await web.someAsyncPropertyMethod(id, propItem);
    })
  );

  return pageProps;
};

额外提醒 #

• 不要在forEach里使用await，这是异步开发里的常见误区，forEach的设计初衷就不是处理异步流；
• 如果你的业务逻辑有特殊的并发控制需求（比如限制同时执行的异步操作数量），可以在此基础上扩展，但对于大多数场景，上面两种方案足够解决问题。

内容的提问来源于stack exchange，提问作者Eddie