JavaScript 中的异步 forEach

 更新时间:2023年07月08日 11:44:15   作者:迹忆客  
这篇文章主要介绍了JavaScript异步forEach的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

在本篇文章中,我们将看看我们是否可以在 JavaScript 的 forEach 循环中使用异步。 有哪些选择?

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');

这里有一些问题:

  • 未处理迭代器函数返回的 Promise; 因此,如果其中一个出错,也不会被注意到。 如果节点 10 上没有注册 unhandledrejection 侦听器,进程就会崩溃!
  • 所有奖金是同时分配的,而不是顺序分配的,因为 forEach 不会等待每个承诺一个接一个地实现。 结果,循环在所有奖金发放之前就结束了。
  • 结果,在任何奖励完全发放之前,sendEmail() 发送了电子邮件。 也许一个也不会发出; 他们可能都会抛出错误!

以下是我们可以为此实施的解决方案:

1.连续处理每个奖金。 你可以使用 for…of 构造,因为 JavaScript 支持异步等待。

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

在继续下一个奖金之前,此循环将等待前一个奖励发出。 虽然它会比我们需要的更冗长,但您也可以在这种情况下使用典型的 for(…;…;…) 。

1.并行处理所有奖金。

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

如果顺序无关紧要,则可以更快地同时分析所有员工。 这将立即开始发放所有奖金,但在发送所有奖金之前不会发送电子邮件()。

for 和 while 循环自然地与 async-await 一起运行,因为它们是在原始函数体中编写的。 但是,当您调用另一个函数时,仅当被调用函数返回一个承诺并处理该承诺时,才能使用 async-await。

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

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

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

相关文章

  • js 中{},[]中括号,大括号使用详解

    js 中{},[]中括号,大括号使用详解

    { } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数
    2011-05-05
  • JS一维数组转化为三维数组方法

    JS一维数组转化为三维数组方法

    这篇文章主要给大家分享了JS一维数组转化为三维数组的方法,下面文章围绕JS数组转换的相关资料展开内容,对大家的学习有一定的参考价值,需要的小伙伴可以参考一下
    2022-01-01
  • ECharts多图表联动功能的实现过程

    ECharts多图表联动功能的实现过程

    echarts是非常好用的图表插件,下面这篇文章主要给大家介绍了关于ECharts多图表联动功能的相关资料,需要的朋友可以参考下
    2021-06-06
  • 微信小程序新手教程之启动页的重要性

    微信小程序新手教程之启动页的重要性

    这篇文章主要给大家介绍了关于微信小程序新手教程之启动页重要性的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 详解ES6中class的实现原理

    详解ES6中class的实现原理

    这篇文章主要介绍了详解ES6中class的实现原理,帮助大家更好的理解和学习JavaScript es6,感兴趣的朋友可以了解下
    2020-10-10
  • 详解小程序缓存插件(mrc)

    详解小程序缓存插件(mrc)

    这篇文章主要介绍了详解小程序缓存插件(mrc),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 借助script进行Http跨域请求:JSONP实现原理及代码

    借助script进行Http跨域请求:JSONP实现原理及代码

    script元素的src属性能设置URL并发起HTTP GET请求实现脚本操作HTTP可以跨域通信而不受限与同源策略,接下来为大家详细介绍下Http跨域请求实现,感兴趣的你可以参考下哈
    2013-03-03
  • js弹出窗口返回值的简单实例

    js弹出窗口返回值的简单实例

    下面小编就为大家带来一篇js弹出窗口返回值的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 使用Web Component实现防篡改水印

    使用Web Component实现防篡改水印

    Web Component内部有钩子天然支持被篡改时被触发,用来防篡改非常方便,所以本文就将使用Web Component实现防篡改水印,感兴趣的小伙伴可以了解下
    2023-12-12
  • User Scripts: Video Download by User Scripts

    User Scripts: Video Download by User Scripts

    User Scripts: Video Download by User Scripts...
    2007-05-05

最新评论