请问在foreach里面进行异步操作，怎么返回异步操作后的数据？

Question

代码如下:

function longTimeDo() {
    let data = [];
    let sourse = [1,2,3,4,5];
    sourse.forEach(value=>{
        setTimeout(()=>{
            data.push(value);
        },1000);
    });
    //?怎么返回这个异步完成的data
}

Answer 1

你可以用Promise.all或者for of加async/await。

function pushData(arr, value) {
    return new Promise((reslove) => {
        setTimeout(() => {
            arr.push(value);
            console.log('push data over', value)
            reslove();
        }, 1000);
    })
}

async function longTimeDo() {
    let data = [];
    let sourse = [1, 2, 3, 4, 5];

    for (let value of sourse) {
        await pushData(data, value);
    }

    console.log(data)

}

longTimeDo();

Answer 2

这样是不行的哦:

function longTimeDo() {
    let data = [];
    let sourse = [1,2,3,4,5];
    sourse.forEach(value => {
        console.log('forEach-star')
        setTimeout(() => {
            data.push(value);
            console.log('forEach-async')
        }, 1000);
        console.log('forEach-end')
    });
    console.log('longTimeDo-end');
}
longTimeDo();

输出结果为

从结果可以看到, 在循环中的异步只是会在循环中作用, 而不能影响循环外部. 如果你想让这个函数返回 异步后的结果的话 就相当于异步改同步, 就要用到Primise了

async function longTimeDo () {
    let data = [];
    let sourse = [1,2,3,4,5];
    let allP = sourse.map(value => {
        return new Promise((res, rej) => {
            setTimeout(() => {
                data.push(value+1);
                res(data)
            }, 1000);
        });
    });
    await Promise.all(allP);

    return data;
}
longTimeDo().then(res => {
    log(res) // [2, 3, 4, 5, 6]
})

Answer 3

最low的办法是加个计数，num=0;settimeout一次就加1，判断当num==source.length的时候再return data