当我们在forEach中进行异步请求时，会发现循环结束后并没有获取到相应的值。
const fun = item => new Promise(function (resolve) {
console.log("promise1", item)
resolve(item)
})
let arr = [1, 2, 3]
let resArr=[]
arr.forEach(async i => {
console.log(i)
let res = await fun(i)
resArr.push(resArr)
console.log(res)
})
console.log("resArr",resArr)
运行结果
从结果中我们发现执行到await时跳出了循环，这是为什么呢。
首先我们需要了解forEach的执行循环方式，就如mnd上对forEach的描述一样。
定义描述
这就既然是一个回调函数，那就不难理解在函数中用await调用异步跳出函数执行。有人或许会疑问await不是同步执行吗，先别急让我们看看这段代码，既然我们知道forEach() 方法对数组的每个元素执行一次给定的函数。那我们是不是可以把一次循环模拟成这样。
const fun = item => new Promise(function (resolve) {
console.log("promise1", item)
resolve(item)
})
async function fn() {
console.log(0)
await fun(0)
console.log("end")
}
fn()
console.log("Promise")
执行结果
看到这段代码是不是就很熟悉了，虽然await是将异步转为了同步，但我们经常会忽略await只会让当前的async方法内同步执行。我们看一下await的描述就很好理解了。
await描述
在for...of循环中调用异步就不会出现这个问题。
const fun = item => new Promise(function (resolve) {
console.log("promise1", item)
resolve(item)
})
let arr = [1, 2, 3]
let resArr = []
async function fn() {
for (item of arr) {
console.log(item)
let res = await fun(item)
resArr.push(resArr)
}
console.log("resArr", resArr)
}
fn()
执行结果
for...of的实现原理可以理解为就是对可迭代对象进行枚举。
执行逻辑
有关forEach和for.....of其他概念可以看看MDN的官方文档。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
