await 在 forEach 中不生效解决方案
# 一、场景
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只支持同步代码。forEach并不会去处理异步的情况
# 二、解决办法
# 2.1 第一种是使用 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')
}
