重学 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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
JavaScript中的Screen屏幕对象
Jan 16 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 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
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
初始Nodejs
2014/11/08 NodeJs
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
python SMTP实现发送带附件电子邮件
2018/05/22 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
解决c++调用python中文乱码问题
2020/07/29 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
工程专业求职自荐书范文
2014/02/08 职场文书
私人委托书格式
2014/09/10 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
教师节感想
2015/08/11 职场文书
golang中的空接口使用详解
2021/03/30 Python
Python中zipfile压缩包模块的使用
2021/05/14 Python
Spring Bean是如何初始化的详解
2022/03/22 Java/Android