async中的循环问题

在async中使用循环时，可能会出现意想不到的情况，接下来我们就来看看。

使用for循环

let arr = [1, 2, 3, 4, 5]

function foo(val) {
    return new Promise(res => {
        setTimeout((e) => {
            res(e);
            console.log(e);
        }, 1000, val);
    })
}

async function bar() {
    for (let i = 0; i < arr.length; i++) {
        await foo(arr[i])
    }
    console.log(`next`);
}

bar();

非常好，每隔一秒打印一次，是我们想要的效果。

forEach

let arr = [1, 2, 3, 4, 5]

function foo(val) {
    return new Promise(res => {
        setTimeout((e) => {
            res(e);
            console.log(e);
        }, 1000, val);
    })
}

function bar1() {
    arr.forEach(async i => await
        foo(i)
    )
    console.log(`next`);
}

bar1()

我们发现next被先打印了，而后也没有每隔一秒打印一次了，而是一次打印全部。

原因也很简单，forEach里面是一个回调函数，这样做相当于同时产生了五个await，自然就会一起打印了。

同理，只要是执行了一次回调函数的循环都会和forEach一样，没错说的就是map。而直接循环的就只有for循环系列了，那就是for/of，直接for循环这些。

总结

在async中写循环还是老老实实用for循环叭。

记录记录！