在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 相关文章推荐
JS 自动安装exe程序
Nov 30 Javascript
面向对象的javascript(笔记)
Oct 06 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 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实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
php session_decode函数用法讲解
2019/05/26 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
PyQt 线程类 QThread使用详解
2017/07/16 Python
浅谈Python处理PDF的方法
2017/11/10 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
哪些是python中web开发框架
2020/06/17 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
八年级英语教学反思
2014/01/09 职场文书
专题组织生活会方案
2014/06/15 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
心得体会的写法
2014/09/05 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
golang操作rocketmq的示例代码
2022/04/06 Golang