forEach 中使用 async 问题

问题描述

在 JavaScript 开发中，我们经常需要遍历数组并对每个元素执行异步操作。当在 forEach 循环中使用 async/await 语法调用异步函数时，会发现异步函数还没有执行完成，循环就已经继续向下执行了，导致异步操作的结果不符合预期。

问题示例

以下代码展示了这个问题：

async function processArray() {
  const items = [1, 2, 3, 4, 5];
  
  console.log('开始处理数组');
  
  items.forEach(async (item) => {
    const result = await fetchData(item);
    console.log(`处理结果: ${result}`);
  });
  
  console.log('数组处理完成');
}

// 模拟异步数据获取
function fetchData(id) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(`数据 ${id}`);
    }, 1000);
  });
}

processArray();

预期输出（按顺序）：

开始处理数组
处理结果: 数据 1
处理结果: 数据 2
处理结果: 数据 3
处理结果: 数据 4
处理结果: 数据 5
数组处理完成

实际输出（顺序混乱）：

开始处理数组
数组处理完成
处理结果: 数据 1
处理结果: 数据 2
处理结果: 数据 3
处理结果: 数据 4
处理结果: 数据 5

原因分析

这个问题的核心原因在于 JavaScript 中 forEach 方法的设计和异步函数的工作原理：

1. forEach 是同步的：forEach 方法在设计上是同步执行的，它会立即遍历完数组中的所有元素，不会等待回调函数中的异步操作完成

2. async 函数返回 Promise：当我们在 forEach 的回调函数中使用 async 关键字时，这个回调函数会返回一个 Promise 对象，但 forEach 不会处理或等待这些 Promise 完成

3. 事件循环机制：JavaScript 的事件循环会将同步代码先执行完毕，然后再处理异步代码（微任务和宏任务）。在上面的例子中，forEach 循环作为同步代码会先执行完，然后才会处理异步的 fetchData 调用

解决方案

方案一：使用 for of 循环

for of 循环支持在循环体中使用 await，可以确保异步操作按顺序完成：

async function processArray() {
  const items = [1, 2, 3, 4, 5];
  
  console.log('开始处理数组');
  
  for (const item of items) {
    const result = await fetchData(item);
    console.log(`处理结果: ${result}`);
  }
  
  console.log('数组处理完成');
}

这种方式会按顺序执行异步操作，一个完成后再执行下一个。

方案二：使用 Promise.all + map

如果希望并行执行所有异步操作，可以使用 Promise.all 和 map 方法：

async function processArray() {
  const items = [1, 2, 3, 4, 5];
  
  console.log('开始处理数组');
  
  const promises = items.map(async (item) => {
    const result = await fetchData(item);
    console.log(`处理结果: ${result}`);
    return result;
  });
  
  await Promise.all(promises);
  console.log('数组处理完成');
}

这种方式会同时开始所有异步操作，效率更高，但执行顺序可能不确定（取决于哪个异步操作先完成）。

方案三：使用 reduce 链式调用

如果需要确保异步操作按顺序执行，同时保持函数式编程风格，可以使用 reduce 方法：

async function processArray() {
  const items = [1, 2, 3, 4, 5];
  
  console.log('开始处理数组');
  
  await items.reduce(async (prevPromise, item) => {
    // 等待前一个异步操作完成
    await prevPromise;
    // 执行当前异步操作
    const result = await fetchData(item);
    console.log(`处理结果: ${result}`);
  }, Promise.resolve());
  
  console.log('数组处理完成');
}

这种方式通过将前一个 Promise 的完成作为下一个异步操作的开始条件，实现了顺序执行。

方案四：自定义异步 forEach 函数

我们也可以自己实现一个支持异步操作的 forEach 函数：

async function asyncForEach(array, callback) {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array);
  }
}

async function processArray() {
  const items = [1, 2, 3, 4, 5];
  
  console.log('开始处理数组');
  
  await asyncForEach(items, async (item) => {
    const result = await fetchData(item);
    console.log(`处理结果: ${result}`);
  });
  
  console.log('数组处理完成');
}