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')
}
@前端进阶之旅: 代码已经复制到剪贴板
这样可以生效的原因是
async函数肯定会返回一个Promise对象，调用map以后返回值就是一个存放了Promise的数组了，这样我们把数组传入Promise.all中就可以解决问题了。但是这种方式其实并不能达成我们要的效果，如果你希望内部的fetch是顺序完成的，可以选择第二种方式
# 2.2 另一种方法是使用 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')
}
@前端进阶之旅: 代码已经复制到剪贴板
以上代码等价于 for...of，可以看成 for...of 是以上代码的语法糖
