为啥await在forEach中不生效？

用户3258338

发布于 2019-10-29 16:04:58

2.4K0

发布于 2019-10-29 16:04:58

文章被收录于专栏：女程序员的日常_Lin女程序员的日常_Lin

1024节快乐~

前两天要写循环遍历请求接口，于是就在forEach中用到了await，但是根本不是我想要的啊！

于是各种查，各种搜，终于有点明白了。先看段代码：

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

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

test();

期望打印出来顺序是：

3
2
1
end

然而打印顺序确实

end
1
2
3

原因是forEach只支持同步代码

Pollyfill版本的forEach，简化以后类似于下面的伪代码：

while(index < arr.length){
  callback(item, index)
}

forEach只是简单的执行下回调函数，并不会处理异步的情况。

解决办法

方法一：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的数组。但是这样并不能保证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")
}

因为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")
}

以上代码等价于for...of

参考文章：https://yuchengkai.cn/blog/2019-04-01.html#%E6%80%8E%E4%B9%88%E8%A7%A3%E5%86%B3%EF%BC%9F

愿我们有能力不向生活缴械投降---Lin

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-10-24，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript