为什么 JavaScript forEach() 与 await 不兼容（如何修复）

Source: Dev.to

问题：await 在 Array.prototype.forEach 中

在 JavaScript 中，最让人困惑的异步问题之一是开发者在 forEach() 回调里使用 await，却期望迭代能够顺序执行。

const users = ["John", "Emma", "Michael"];

users.forEach(async (user) => {
  await sendEmail(user);
  console.log(`Email sent to ${user}`);
});

console.log("All emails processed");

你期望的结果

Email sent to John
Email sent to Emma
Email sent to Michael
All emails processed

实际发生的情况

All emails processed
Email sent to John
Email sent to Emma
Email sent to Michael

forEach() 不会 等待回调中的异步工作。它会立即启动所有迭代，然后继续向下执行，所以 console.log("All emails processed") 会在任何 sendEmail 的 Promise 完成之前就运行。这会导致竞争条件和逻辑错误——在生产代码中尤其危险，例如支付处理、数据库写入或邮件营销活动。

为什么 forEach() 与 await 不兼容

• forEach() 设计用于 同步 操作。
• 回调的返回值会被忽略；forEach() 本身返回 undefined。
• 即使回调是 async，forEach() 也 不会 为 Promise 的解析暂停。
• 因此，回调中的 await 对外部流程没有任何影响。

// 这并不意味着“一个接一个地等待每个任务”
users.forEach(async (user) => {
  await sendEmail(user);
});

它实际上意味着“立即启动所有任务且不等待”。

使用 for...of 安全顺序执行

在 async 函数中使用 for...of 循环是逐个处理项目的最简单方式。

const users = ["John", "Emma", "Michael"];

async function processUsers() {
  for (const user of users) {
    await sendEmail(user);
    console.log(`Email sent to ${user}`);
  }

  console.log("All emails processed");
}

processUsers();

输出

Email sent to John
Email sent to Emma
Email sent to Michael
All emails processed

for...of 会尊重 await，确保每一次迭代在下一次开始前完成。此模式适用于：

• 支付处理
• 数据库写入
• 邮件发送
• 文件上传
• 限流 API
• 认证流程
• 任何顺序重要的场景

使用 Promise.all 并行执行

当顺序不重要且希望并发运行任务时，可使用 Promise.all 搭配 Array.prototype.map。

const users = ["John", "Emma", "Michael"];

await Promise.all(
  users.map(async (user) => {
    await sendEmail(user);
    console.log(`Email sent to ${user}`);
  })
);

console.log("All emails processed");

所有 sendEmail 调用会一次性启动，但 await Promise.all 确保在 所有 Promise 完成后才执行最后的日志。

常见错误：在 forEach 上使用 await

有些开发者会尝试对 forEach 调用本身使用 await：

await users.forEach(async (user) => {
  await sendEmail(user);
});

这仍然会失败，因为 forEach() 返回 undefined；没有可供 await 等待的对象。

经验法则：
不要在 forEach 上使用 await。顺序工作使用 for...of，并行工作使用 Promise.all。

小结

• forEach() 会忽略 await 并返回 undefined。
• 需要 顺序 异步执行时使用 for...of。
• 需要 并行 异步执行时使用 Promise.all（配合 map）。
• 记住：“我是在等待循环本身，还是仅仅在等待循环内部的函数？”——这个问题能快速帮助你发现 bug。

掌握这些模式可以让 JavaScript 异步代码更清晰，并帮助防止难以追踪的生产环境错误。