重学 JS:为啥 await 不能用在 forEach 中详解


Posted in Javascript onApril 15, 2019

这是重学 JS 系列的第三篇文章,写这个系列的初衷也是为了夯实自己的 JS 基础或者了解一些之前不知道的东西。既然是重学,肯定不会从零开始介绍一个知识点,如有遇到不会的内容请自行查找资料。

不知道你有没有写过类似的代码,反正以前我是写过

function test() {
 let arr = [3, 2, 1]
 arr.forEach(async item => {
  const res = await fetch(item)
  console.log(res)
 })
 console.log('end')
}

function fetch(x) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve(x)
  }, 500 * x)
 })
}

test()

我当时期望的打印顺序是

3
2
1
end

 结果现实与我开了个玩笑,打印顺序居然是

end
1
2
3

为什么?

其实原因很简单,那就是 forEach 只支持同步代码。

我们可以参考下 Polyfill 版本的 forEach,简化以后类似就是这样的伪代码

while (index < arr.length) {
  // 也就是我们传入的回调函数
  callback(item, index)
}

从上述代码中我们可以发现,forEach 只是简单的执行了下回调函数而已,并不会去处理异步的情况。并且你在 callback 中即使使用 break 也并不能结束遍历。

怎么解决?

一般来说解决的办法有两种。

第一种是使用 Promise.all 的方式

async function test() {
 let arr = [3, 2, 1]
 await Promise.all(
  arr.map(async item => {
   const res = await fetch(item)
   console.log(res)
  })
 )
 console.log('end')
}

这样可以生效的原因是 async 函数肯定会返回一个 Promise 对象,调用 map 以后返回值就是一个存放了 Promise 的数组了,这样我们把数组传入 Promise.all 中就可以解决问题了。但是这种方式其实并不能达成我们要的效果,如果你希望内部的 fetch 是顺序完成的,可以选择第二种方式。

第一种方法是使用 for...of

async function test() {
 let arr = [3, 2, 1]
 for (const item of arr) {
  const res = await fetch(item)
  console.log(res)
 }
 console.log('end')
}

这种方式相比 Promise.all 要简洁的多,并且也可以实现开头我想要的输出顺序。

但是这时候你是否又多了一个疑问?为啥 for...of 内部就能让 await 生效呢。

因为 for...of 内部处理的机制和 forEach 不同,forEach 是直接调用回调函数,for...of 是通过迭代器的方式去遍历。

async function test() {
 let arr = [3, 2, 1]
 const iterator = arr[Symbol.iterator]()
 let res = iterator.next()
 while (!res.done) {
  const value = res.value
  const res1 = await fetch(value)
  console.log(res1)
  res = iterator.next()
 }
 console.log('end')
}

最后
以上就是本篇文章的全部内容了,如果你还有什么疑问欢迎在评论区与我互动。

我所有的系列文章都会在我的 Github 中最先更新,有兴趣的可以关注下。今年主要会着重写以下三个专栏

重学 JS
React 进阶
重写组件

以上所述是小编给大家介绍的为啥await 不能用在 forEach 中详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
js校验开始时间和结束时间
May 26 Javascript
微信小程序实现电影App导航和轮播
Nov 30 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 #Javascript
详解JavaScript中的强制类型转换
Apr 15 #Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 #Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 #Javascript
ES6知识点整理之模块化的应用详解
Apr 15 #Javascript
详解如何运行vue项目
Apr 15 #Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 #Javascript
You might like
文件上传的实现
2006/10/09 PHP
php5.3 注意事项说明
2013/07/01 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
教师实习自我鉴定
2013/12/13 职场文书
市场营销工作计划书
2014/05/06 职场文书
宣传普通话标语
2014/06/27 职场文书
五四演讲稿范文
2014/09/03 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python