在JS循环中使用async/await的方法


Posted in Javascript onOctober 12, 2018

async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案。目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度,本篇文章将分享在JS循环中使用async/await的方法.

在开发maty.js时,遇到一个数组任务,数组项是内部异步执行的函数,期望是同步依次执行每项函数,每项函数执行完本身的异步任务后,继续下一项。

刚开始单纯使用map来循环执行,并且await每项函数。如下所示:

starters.map(async (fn, i)=> {
 console.log('++++++++++: ', i)
 await fn(ctx);
});

结果是依次先输出了索引i,而不是阻塞每次循环,按期望执行。

搬出Google大法,可以看出对在 for…of 循环语法中使用await是有效的。

for (const fn of starters) {
 await fn(ctx);
}

同时文章中指出使用Promise.all,是无法解决当前问题的,因为all方法是并行运行的。很奇怪为什么没有串行执行的原生方法。

总结

以上所述是小编给大家介绍的在JS循环中使用async/await的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
js直接编辑当前cookie的脚本
Sep 14 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 #Javascript
vue项目环境变量配置的实现方法
Oct 12 #Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 #Javascript
原生JS实现轮播图效果
Oct 12 #Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 #Javascript
Element Input组件分析小结
Oct 11 #Javascript
element el-input directive数字进行控制
Oct 11 #Javascript
You might like
收集的php编写大型网站问题集
2007/03/06 PHP
php 在线打包_支持子目录
2008/06/28 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
用unescape反编码得出汉字示例
2014/04/24 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
跟老齐学Python之类的细节
2014/10/13 Python
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
python代码能做成软件吗
2020/07/24 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android