foreach 异步不起作用 - JavaScript

在 JavaScript 中使用 foreach 遍历数组是常见的操作。然而，当我们希望在遍历数组时进行异步操作，比如网络请求或者读取文件等操作时，使用 foreach 会出现问题。本文将介绍 foreach 异步不起作用的问题，并提供解决方案。

foreach 异步问题

在 JavaScript 中，foreach 遍历数组是同步的。这意味着，当 foreach 循环体内执行异步操作时，它不会等待异步操作完成，而是继续往下执行。下面是一个简单的示例：

const arr = [1, 2, 3];

arr.forEach(async (item) => {
  const result = await fetchData(item);
  console.log(result);
});

console.log("End");

上述代码的输出结果会是先打印 "End"，然后才是异步操作的结果。这是因为 foreach 循环体内的异步操作并不会等待异步操作完成，而是直接执行下一次循环。

解决方案

一种常见的解决方案是使用 for...of 循环代替 foreach 循环。for...of 循环是一种异步的遍历方式，可以等待异步操作完成后再执行下一次循环。下面是一个使用 for...of 循环的示例：

const arr = [1, 2, 3];

async function main() {
  for (const item of arr) {
    const result = await fetchData(item);
    console.log(result);
  }

  console.log("End");
}

main();

上述代码会先执行异步操作，等待异步操作完成后再执行下一次循环。输出结果会是异步操作的结果，最后才是 "End"。

除了 for...of 循环，还有其他的解决方案，比如使用 Promise.all 函数将所有异步操作封装为一个 Promise，一次性等待所有异步操作完成。不过，使用 for...of 循环是最简单，最常见的解决方案。

总结

在 JavaScript 中使用 foreach 遍历数组时进行异步操作会出现问题，因为 foreach 循环体内的异步操作并不会等待异步操作完成。可以使用 for...of 循环代替 foreach 循环，或者使用 Promise.all 函数封装所有异步操作为一个 Promise。