forEach中的异步请求

当我们在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()

执行结果

执行逻辑