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

这是重学 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 中详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript中的await/async的作用和用法

    await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了.虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段. 直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据 老朋友 Ajax 传统的写法,无需解释 // 获取产品数据 ajax('products.json', (products) => { console.log('AJAX/products >>>', JSON

  • JS中的forEach、$.each、map方法推荐

    forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环.例如下面这个例子: [1, 2 ,3, 4].forEach(alert); 等同于下面这个for循环 var array = [1, 2, 3, 4]; for (var k = 0, length = array.length; k < length; k++) { alert(array[k]); } Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach方法中的function回

  • NodeJs通过async/await处理异步的方法

    场景 远古时代 我们在编写express后台,经常要有许多异步IO的处理.在远古时代,我们都是用chunk函数处理,也就是我们最熟悉的那种默认第一个参数是error的函数.我们来模拟一个Mongo数据库的操作,感受一下. mongoDb.open(function(err, db){ if(!err){ db.collection("users", function(err, collection){ if(!err){ let person = {name: "yika&q

  • JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍

    •原理: •高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: •forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: •数组中有几项,那么传递进去的匿名回调函数就需要执行几次: •每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: •理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行

  • async/await与promise（nodejs中的异步操作问题）

    举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文章作者信息.获取全部数据之后渲染文章详情页.数据库操作都是异步的,最直接想到的办法就是一层一层的回调函数,问题出来了:十分不雅观,要是层再多一点还会有更多麻烦.怎么解决?业内为了处理异步操作问题也是拼了,什么async,q,bluebird,co,处理方式不同,各有千秋,感兴趣可以了解一下,但是惊喜的发现nodejs 7.6已经默认支持ES7中的 async/awa

  • javascript forEach通用循环遍历方法

    复制代码 代码如下: var forEach = (function(){ //数组与伪数组的遍历 var _Array_forEach = function (array, block, context) { if (array == null) return; //对String进行特殊处理 if(typeof array == 'string'){ array = array.split(''); } var i = 0,length = array.length; for (;i < l

  • Js中async/await的执行顺序详解

    前言 虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉可以先看下这篇文章)后拓展了一下,我理了一下await之后js的执行顺序,希望可以给别人解疑答惑,先简单介绍一下async/await. async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. async/await 是建立在 promise 的基础上

  • 详解JavaScript中的forEach()方法的使用

    JavaScript数组的 forEach()方法调用数组中的每个元素. 语法 array.forEach(callback[, thisObject]); 下面是参数的详细信息: callback : 函数测试数组的每个元素. thisObject : 对象作为该执行回调时使用. 返回值: 返回创建数组. 兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现.为了使它工作,你需要添加下面的脚本代码的顶部: if (!Array.prototy

  • 全面解析JavaScript里的循环方法之forEach，for-in，for-of

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.length; index++) { console.log(m

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

    这是重学 JS 系列的第三篇文章,写这个系列的初衷也是为了夯实自己的 JS 基础或者了解一些之前不知道的东西.既然是重学,肯定不会从零开始介绍一个知识点,如有遇到不会的内容请自行查找资料. 不知道你有没有写过类似的代码,反正以前我是写过 function test() { let arr = [3, 2, 1] arr.forEach(async item => { const res = await fetch(item) console.log(res) }) console.log('en

  • 重学JS 系列：聊聊继承(推荐)

    重学JS 系列：聊聊继承(推荐)

    原型 继承得靠原型来实现,当然原型不是这篇文章的重点,我们来复习一下即可. 其实原型的概念很简单: 所有对象都有一个属性 __proto__ 指向一个对象,也就是原型 每个对象的原型都可以通过 constructor 找到构造函数,构造函数也可以通过 prototype 找到原型 所有函数都可以通过 __proto__ 找到 Function 对象 所有对象都可以通过 __proto__ 找到 Object 对象 对象之间通过 __proto__ 连接起来,这样称之为原型链.当前对象上不存在的属

  • JS前端常见的竞态问题解决方法详解

    JS前端常见的竞态问题解决方法详解

    目录 什么是竞态问题 取消过期请求 XMLHttpRequest 取消请求 fetch API 取消请求 axios 取消请求 可取消的 promise 忽略过期请求 封装指令式 promise 使用唯一 id 标识每次请求 「取消」和「忽略」的比较 「取消」更实际 「忽略」更通用 总结 什么是竞态问题 竞态问题,又叫竞态条件(race condition),它旨在描述一个系统或者进程的输出依赖于不受控制的事件出现顺序或者出现时机. 此词源自于两个信号试着彼此竞争,来影响谁先输出. 简单来说,竞

  • JS面试之异步模拟超时重传机制详解

    JS面试之异步模拟超时重传机制详解

    目录 引言 题目分析 代码设计 核心讲解 引言 前面我讲解了两篇有关异步的逻辑思维题目,一个是红绿灯转换,还有一个是异步并发限制.有小伙伴私信我说不过瘾,希望还能再出一篇异步超时重传的讲解.为了满足这位粉丝的小小要求(我尼玛),我查询了相关资料和面试题,确实发现这是某大肠面试的代码设计题.不得不说这位粉丝发现的这个题目是相当亮眼,相当给力. 题目分析 超时重传机制,看到这个词语想必科班同学都十分十分熟悉吧.大家第一时间肯定会想到计算机网络中tcp的超时重传.不错,此处的异步模拟超时重传机制和计算

  • JS之if语句对接事件动作逻辑(详解)

    JS之if语句对接事件动作逻辑(详解)

    if 函数的实现步骤: function +名字() 指定id , 指定开关(display: none or block) if + else 构成逻辑 控制开关 决定在哪里安置一个灯泡, 指定一个id给某个标签 把开关用电线连着灯泡, 安装开关#+id名称{ 属性1= 赋值, 属性 2 = 赋值 , 属性3 = 赋值 } 所有的赋值都可以成为一个开关. 如果是一个手动版的, 这里已经完成了. 更改属性的赋值就可以变更id的样式 帮开关装上感应元件, 一旦有动静, 开关便自动switch 建立

  • 正则 js分转元带千分符号详解

    正则 js分转元带千分符号详解

    可以通过缩放来进行分到元的转换,同时使用正则对处理后的数字进行千分位格式化 方法1:(不丢失精度) function Fen2Yuan( num ) { if ( typeof num !== "number" || isNaN( num ) ) return null; return ( num / 100 ).toFixed( 2 ); } 方法2: var num = 370825 num=num*0.01;//分到元 num+='';//转成字符串 var reg=num.in

  • Linux使用Node.js建立访问静态网页的服务实例详解

    Linux使用Node.js建立访问静态网页的服务实例详解 一.安装node.js运行所需要的环境,:http://www.jb51.net/article/79536.htm 二.创建node目录(/node/www),并在目录下创建node.js服务文件server.js var http = require('http'); var fs = require('fs');//引入文件读取模块 var documentRoot = '/node/www';//需要访问的文件的存放目录 var

  • 基于js 字符串indexof与search方法的区别(详解)

    基于js 字符串indexof与search方法的区别(详解)

    1.indexof方法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 语法: 注意:有可选的参数(即设置开始的检索位置). 2.search方法 search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串. 注意:search方法可以根据正则表达式查找指定字符串(可以忽略大小写,并且不执行全局检索),同时没有可选参数(即设置开始的检索位置). 以上这篇基于js 字符串indexof与search方法的区别(详解)就是小编分享给大家的全部

  • Vue.js分页组件实现：diVuePagination的使用详解

    Vue.js分页组件实现：diVuePagination的使用详解

    一.介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 二.创建初始化项目 这里不在详细说明,我们的分页演示只需要vue和vue-router就可以了,我们直接构建项目和设置配置. main.js:

  • JS字符串与二进制的相互转化实例代码详解

    JS字符串与二进制的相互转化实例代码详解

    JS字符串与二进制的相互转化的方法,具体代码如下所示: //字符串转ascii码,用charCodeAt(); //ascii码转字符串,用fromCharCode(); var str = "A"; var code = str.charCodeAt(); var str2 = String.fromCharCode(code); 十进制转二进制 var a = "i"; console.log(a.charCodeAt()); //105 console.log

随机推荐