forEach遇上await：你的异步代码真的在按顺序执行吗？

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

技术qq交流群：906392632

大家好，我是小杨，一个摸爬滚打了6年的前端老鸟。今天要和大家聊一个看似简单却暗藏玄机的话题------在forEach中使用await。这就像你以为自己在排队买奶茶，结果发现大家都挤在柜台前乱成一团，完全不是想象中的顺序执行！

一、一个让我栽过跟头的例子

去年我在做一个批量处理用户数据的任务时，写了这样的代码：

javascript 复制代码

const userIds = [1, 2, 3, 4, 5];

// 我想依次处理每个用户
userIds.forEach(async (id) => {
  const user = await fetchUser(id); // 获取用户信息
  await processUser(user); // 处理用户数据
  console.log(`处理完成用户 ${id}`);
});

console.log('所有用户处理完成？');

结果你猜怎么着？控制台先打印了"所有用户处理完成？"，然后用户处理日志几乎是同时出现的！完全不是我想要的顺序执行效果。

二、为什么forEach中的await不按套路出牌？

这里有个重要的知识点：forEach不会等待异步操作完成 。它只是同步地遍历数组，对每个元素执行回调函数，但不会关心回调函数内部的await。

用生活场景比喻：就像你同时给5个朋友发微信说"到了吗？"，然后不等他们回复就直接宣布"所有人都到了"一样不靠谱。

三、几种正确的处理方式

1. 老实的for循环

javascript 复制代码

for (let i = 0; i < userIds.length; i++) {
  const user = await fetchUser(userIds[i]);
  await processUser(user);
  console.log(`处理完成用户 ${userIds[i]}`);
}
console.log('这次是真的所有用户处理完成');

这才是真正的顺序执行，每个await都会等待前一个完成。

2. for...of循环（我的最爱）

javascript 复制代码

for (const id of userIds) {
  const user = await fetchUser(id);
  await processUser(user);
  console.log(`处理完成用户 ${id}`);
}

更简洁，效果和普通for循环一样。

3. 如果需要并行处理

javascript 复制代码

// 使用map+Promise.all
const promises = userIds.map(async (id) => {
  const user = await fetchUser(id);
  await processUser(user);
  return `处理完成用户 ${id}`;
});

const results = await Promise.all(promises);
console.log(results); // 所有结果数组
console.log('真正所有用户处理完成');

这种方式适合不需要顺序执行，但要等所有任务完成的场景。

四、为什么会有这种差异？

关键在于不同的遍历方法对异步操作的处理方式：

方法	是否等待异步	执行顺序
forEach	❌ 不等待	并行
for循环	✅ 等待	顺序
for...of	✅ 等待	顺序
map+Promise.all	❌ 不等待但收集结果	并行

五、一个更直观的例子

来看这个简单的例子：

javascript 复制代码

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

[1, 2, 3].forEach(async (num) => {
  await delay(1000);
  console.log(num);
});
console.log('结束');

// 输出：
// 结束
// (大约1秒后)
// 1
// 2
// 3 几乎同时出现

对比for...of版本：

javascript 复制代码

for (const num of [1, 2, 3]) {
  await delay(1000);
  console.log(num);
}
console.log('结束');

// 输出：
// (间隔1秒)
// 1
// 2
// 3
// 结束

六、什么时候该用forEach+await？

其实在大多数情况下，你不应该 在forEach中使用await。但如果你确实需要：

不关心执行顺序
不需要等待所有操作完成
只是触发一堆异步操作

比如记录一些不重要的日志：

javascript 复制代码

// 只是发送一些分析日志，不需要等待
analyticsEvents.forEach(async (event) => {
  await sendAnalytics(event); // 不关心是否成功
});

七、我的血泪教训

曾经我在生产环境用forEach+await处理支付订单，结果因为并行执行导致数据库死锁，造成了严重事故。从那以后，我给自己立下规矩：

"看到forEach里有await，先想想是不是真的需要这样写！"

八、总结

forEach中的await不会按预期顺序执行
需要顺序执行时，使用for或for...of循环
需要并行执行时，使用map+Promise.all
除非特殊需求，否则避免在forEach中使用await

记住这个原则，你的异步代码会更加可靠。如果你也遇到过类似的"坑"，欢迎在评论区分享你的故事！