forEach 循环会点函数中使用 async await之后，在外面获取数据为空

`forEach`循环通常用于遍历数组并执行同步操作。当你在`.forEach`回调函数中使用了`async`和`await`处理异步操作时，情况可能会变得复杂一些。

当在`forEach`的回调里使用`async function`，并且这个函数内部有`await`来等待某个异步操作完成，外部的`forEach`循环并不会阻塞，它会在当前任务完成后继续下一次迭代。这意味着，如果某个异步操作返回的数据为空，或者出错，下一次迭代的条件检查会发现上一次迭代的结果，并不会等那个异步操作完成。

例如：

array.forEach(async (item) => {
  const data = await someAsyncFunction(item);
  // 如果someAsyncFunction返回null 或者 错误
  if (!data) {
    console.log('Data is empty or errored');
  }
});

在这种情况下，你需要在外部检查每个迭代后的结果，或者使用Promise.all来确保所有异步操作完成后再处理结果，避免部分数据丢失。如果你希望在所有异步操作都完成后再处理空数据，可以考虑使用`Promise.all(array.map(async ...))`。

相关问题

async await用法 循环完成后 执行await

### 如何在所有循环迭代完成后使用 `async` 和 `await`

为了确保所有的异步操作在一个循环内按预期顺序完成，在 JavaScript 中可以采用多种方法来实现这一点。直接在像 `forEach` 这样的传统遍历函数中使用 `async/await` 并不会达到期望的效果，因为这些方法并不会等待内部的异步回调结束[^2]。

一种有效的方法是利用 `for...of` 循环配合 `async/await` 来逐个处理数组中的每一项并等待其完成：

async function processItemsSequentially(items) {
    for (const item of items) {
        const response = await someAPICall(item);
        console.log('Processed:', response);
    }
}

如果目标是在并发情况下启动多个请求但在继续之前等待它们全部解决，则可考虑创建一个由 Promise 组成的数组，并通过 `Promise.all()` 同时运行这些 Promises:

async function processItemsConcurrently(items) {
    // 创建一个包含所有API调用返回值(Promise对象)的数组
    const promises = items.map(async (item) => {
        return await someAPICall(item); 
    });

    // 等待所有Promises都解析完毕
    const results = await Promise.all(promises);

    // 输出结果
    results.forEach(result => console.log('Result:', result));
}

上述两种方式都能满足不同场景下的需求——前者适用于需要依次执行的任务序列；后者则适合于那些能够独立并行执行而不依赖彼此的结果的情况。

对于给定的例子，可以通过修改代码结构使其按照正确的顺序工作：

// 修改后的版本会等到所有的 API 调用结束后再打印 4 和 5
async function example1() {
    let promises = [
        Promise.resolve(1),
        Promise.resolve(2),
        Promise.resolve(3)
    ];

    // 将每个 promise 的处理封装到一个新的 Promise 数组里
    const processedPromises = promises.map(promise =>
        (async () => {
            let result = await promise;
            console.log(result);
        })()
    );

    // 等待所有新的 Promise 完成之后才继续往下走
    await Promise.all(processedPromises);

    console.log(4);
    console.log(5);
}

example1();

这样就可以保证日志输出先是来自各个 `promise` 解析后的数值，最后才是数字 4 和 5。

foreach 循环调取接口 使用for await解决bug

在 JavaScript 中，使用 `for..of` 或 `forEach` 循环来遍历一个数组或一个类数组对象时，是同步地进行的。如果在循环体内部调用了异步操作（例如调用接口），则会出现问题，因为循环不会等待异步操作完成，就直接执行下一次循环，导致结果不正确。

解决这个问题的方法是使用 `for await..of` 循环，它可以用于遍历支持异步迭代的对象，例如异步生成器和异步迭代器。使用 `for await..of` 循环可以确保在每次循环中等待异步操作完成后再执行下一次循环。

以下是使用 `for await..of` 循环调用接口的示例代码：

async function fetchData() {
  const urls = ['api/url1', 'api/url2', 'api/url3'];
  for await (const data of getData(urls)) {
    console.log(data);
  }
}

async function* getData(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    yield data;
  }
}

在上面的代码中，`fetchData` 函数调用了 `getData` 函数，并使用 `for await..of` 循环遍历异步生成器返回的数据。`getData` 函数接收一个 URL 数组，并使用 `for..of` 循环遍历 URL，调用 `fetch` 方法获取数据，然后使用 `yield` 关键字返回数据给异步生成器。在 `fetchData` 函数中，`for await..of` 循环等待异步生成器返回数据，并输出到控制台。这样就可以确保在每次循环中等待异步操作完成后再执行下一次循环，避免了使用 `forEach` 循环时出现的问题。