单页网站排名,最新新闻头条,做网站需要哪些工程师,网站建设的利益分析转载#xff1a;为啥await在forEach中不生效#xff1f;-腾讯云开发者社区-腾讯云 (tencent.com)
两天要写循环遍历请求接口#xff0c;于是就在forEach中用到了await#xff0c;但是根本不是我想要的啊#xff01;
于是各种查#xff0c;各种搜#xff0c;终于有点明…转载为啥await在forEach中不生效-腾讯云开发者社区-腾讯云 (tencent.com)
两天要写循环遍历请求接口于是就在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)
}
解决办法
方法一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)
}function fetch(x){return new Promise((resolve,reject){setTimeout((){resolve(x)}, 1500*x)})
}test();
因为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
