2022-09-15JavaScript00
请注意,本文编写于 560 天前,最后修改于 560 天前,其中某些信息可能已经过时。

不知道你有没有写过类似的代码,反正以前我是写过

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 只支持同步代码。

我们可以参考下 Polyfill 版本的 forEach,简化以后类似就是这样的伪代码

while (index < arr.length) {
    // 也就是我们传入的回调函数
    callback(item, index)
}

从上述代码中我们可以发现,forEach 只是简单的执行了下回调函数而已,并不会去处理异步的情况。并且你在 callback 中即使使用 break 也并不能结束遍历。

怎么解决?

一般来说解决的办法有两种。

第一种是使用 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 是顺序完成的,可以选择第二种方式。

另一种方法是使用 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 是以上代码的语法糖。

最后

以上就是本篇文章的全部内容了,如果你还有什么疑问欢迎在评论区与我互动。

本文作者:毛超颖

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!