请问在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]

})