在本篇文章中，我們將看看我們是否可以在 JavaScript 的 forEach 循環(huán)中使用異步。 有哪些選擇？

JavaScript 中的異步 forEach

異步編程不適用于 Array.prototype.forEach。 它不適用于 async-await，就像它不適用于 promises 一樣。

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

這里有一些問題：

• 未處理迭代器函數(shù)返回的 Promise； 因此，如果其中一個(gè)出錯(cuò)，也不會(huì)被注意到。 如果節(jié)點(diǎn) 10 上沒有注冊 unhandledrejection 偵聽器，進(jìn)程就會(huì)崩潰！
• 所有獎(jiǎng)金是同時(shí)分配的，而不是順序分配的，因?yàn)?forEach 不會(huì)等待每個(gè)承諾一個(gè)接一個(gè)地實(shí)現(xiàn)。 結(jié)果，循環(huán)在所有獎(jiǎng)金發(fā)放之前就結(jié)束了。
• 結(jié)果，在任何獎(jiǎng)勵(lì)完全發(fā)放之前，sendEmail() 發(fā)送了電子郵件。 也許一個(gè)也不會(huì)發(fā)出； 他們可能都會(huì)拋出錯(cuò)誤！

以下是我們可以為此實(shí)施的解決方案：

1.連續(xù)處理每個(gè)獎(jiǎng)金。 你可以使用 for…of 構(gòu)造，因?yàn)?JavaScript 支持異步等待。

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

在繼續(xù)下一個(gè)獎(jiǎng)金之前，此循環(huán)將等待前一個(gè)獎(jiǎng)勵(lì)發(fā)出。 雖然它會(huì)比我們需要的更冗長，但您也可以在這種情況下使用典型的 for(…;…;…) 。

1.并行處理所有獎(jiǎng)金。

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

如果順序無關(guān)緊要，則可以更快地同時(shí)分析所有員工。 這將立即開始發(fā)放所有獎(jiǎng)金，但在發(fā)送所有獎(jiǎng)金之前不會(huì)發(fā)送電子郵件（）。

for 和 while 循環(huán)自然地與 async-await 一起運(yùn)行，因?yàn)樗鼈兪窃谠己瘮?shù)體中編寫的。 但是，當(dāng)您調(diào)用另一個(gè)函數(shù)時(shí)，僅當(dāng)被調(diào)用函數(shù)返回一個(gè)承諾并處理該承諾時(shí)，才能使用 async-await。

因?yàn)?.reduce() 和 .map() 都會(huì)產(chǎn)生一個(gè)我們可能等待的承諾或一系列承諾，所以我們可以使用它們。

但是，大多數(shù)數(shù)組方法不返回承諾或允許將承諾從一個(gè)調(diào)用傳遞到另一個(gè)調(diào)用，因此無法異步使用它們。 因此，異步代碼不能在數(shù)組內(nèi)部使用，例如 array.some() 或 array.filter()。

到此這篇關(guān)于JavaScript 異步 forEach的文章就介紹到這了,更多相關(guān)js異步 forEach內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論