当前位置:首页 > 问答库 > Web基础知识 > 详情

forEach中的await

来源:千锋教育

发布:syq

2022-12-27

Web基础知识 分类问答库

推荐答案

  不知道你是否写过类似的代码:

  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 也并不能结束遍历。 怎么解决? 一般来说解决的办法有2种,for...of和for循环。使用 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') }

forEach中的await

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

  第1种方法是使用 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') }

  第2种方法是使用 for循环 async function test() { let arr = [3, 2, 1] for (var i=0;i { setTimeout(() => { resolve(x) }, 500 * x) }) } test() 第3种方法是使用 while循环 async function test() { let arr = [3, 2, 1] var i=0; while(i!==arr.length){ const res = await fetch(arr[i]) console.log(res) i++; } console.log('end') } function fetch(x) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(x) }, 500 * x) }) } test() 要想在循环中使用async await,请使用for...of 或者 for 循环, while循环 forEach支持async await forEach 在正常情况像下面这么写肯定是做不到同步的,程序不会等一个循环中的异步完成再进行下一个循环。原因很明显,在上面的模拟中,while 循环只是简单执行了 callback,所以尽管callback内使用了await ,也只是影响到callback内部。

  arr.myforeach(async v => { await fetch(v); }); 要支持上面这种写法,只要稍微改一下就好 Array.prototype.myforeach = async function (fn, context = null) { let index = 0; let arr = this; if (typeof fn !== 'function') { throw new TypeError(fn + ' is not a function'); } while (index < arr.length) { if (index in arr) { try { await fn.call(context, arr[index], index, arr); } catch (e) { console.log(e); } } index ++; } };

更多问题在线答疑

导师线上坐镇
解答个性化学习难题

立即提问

上一篇

前端引擎模板

下一篇

闭包的使用场景

相关问题

更多 >>
是否用过混合APP开发 前端引擎模板 forEach中的await 闭包的使用场景 什么是模块化思想? JS如何实现多线程?
热门问题
Web基础知识 Web培训机构 Web培训费用 Web培训时间 Web培训课程 Web培训就业 零基础学Web Web薪资待遇 Web学习路线

全国咨询热线400-811-9990