JavaScript 中异步 forEach 的陷阱与替代方案

本文将探讨在 JavaScript 的 forEach 循环中执行异步操作的可行性，并分析可用的替代方案。

JavaScript 中的异步 forEach

异步编程并不适用于 Array.prototype.forEach。无论是使用 async/await 还是 Promises，forEach 都无法正确处理异步逻辑。

const employees = await this.getEmployees();
// BAD
await employees.forEach(async (employee) => {
  await giveBonusToEmployee(employee);
});
await sendEmail('All bonuses sent');

主要存在以下问题：

• 未处理迭代器函数返回的 Promise； 因此，如果其中一个出错，也不会被注意到。 如果节点 10 上没有注册 unhandledrejection 侦听器，进程就会崩溃！
• 所有奖金的发放是并行的，而非顺序执行。因为 forEach 不会等待每个 Promise 依次完成，导致循环在所有奖金发放完毕前就结束了。
• 结果是，在 sendEmail() 发送电子邮件之前，没有任何奖励完全发放。甚至可能一个奖励都没有发出，因为它们可能全部抛出错误。

以下是我们可以采取的解决方案：

1. 顺序处理每个奖金。你可以使用 for...of 构造，因为 JavaScript 支持在循环中异步等待。

for (const employee of employees) {
  await giveBonusToEmployee(employee);
}

此循环会在继续处理下一个奖金之前，等待前一个奖励发出。虽然代码比需要的更冗长，但你也可以使用典型的 for(…;…;…) 循环来实现相同效果。

2. 并行处理所有奖金。

await Promise.all(employees.map(async (employee) => {
  await giveBonusToEmployee(employee);
}));

如果顺序不重要，可以同时处理所有员工以加快速度。这将立即开始发放所有奖金，但会等到所有奖金发放完成后才发送电子邮件（）。

for 和 while 循环与 async/await 配合良好，因为它们在原始函数体中编写。然而，当你调用另一个函数时，只有当被调用函数返回一个 Promise 并处理该 Promise 时，才能使用 async/await。

因为 .reduce() 和 .map() 都会产生一个我们可能等待的 Promise 或一系列 Promise，所以我们可以使用它们。

但是，大多数数组方法不返回 Promise 或允许将 Promise 从一个调用传递到另一个调用，因此无法异步使用它们。因此，异步代码不能在数组内部使用，例如 array.some() 或 array.filter()。

到此这篇关于 JavaScript 异步 forEach 的文章就介绍到这了，更多相关 js 异步 forEach 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！