用map和for代替forEach处理异步函数问题

常用的forEach方法,处理异步函数会有问题,
可以使用map和for方法代替之:

const arr = [3, 2, 4, 1]
console.log('start ' + arr)
// forEach产生的异步问题
async function forEachTest() {
    arr.forEach(async item => {
        const res = await mockSync(item)
        console.log('forEach ' + res)
    })
    console.log('forEach end')
}
function mockSync(x) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(x)
        }, 1000 * x)
    })
}
forEachTest() // 期望输出: 3, 2, 4, 1, end forEach; 实际输出: end forEach, 1, 2, 3, 4

// 替代forEach的方式一:map可以避免异步问题
async function asyncFunction(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(num);
        }, 1000);
    });
}

const mapTest = arr.map(async (num) => {
    const result = await asyncFunction(num);
    return result;
});

Promise.all(mapTest).then((results) => {
    console.log('map ' + results); // [3, 2, 4, 1]
    console.log('map end') // end map
});

// 替代forEach的方式二:使用for循环来处理异步函数
async function forTest() {
    for (let i = 0; i < arr.length; i++) {
        const result = await asyncFunction(arr[i]);
        // results.push(result);
        console.log('for ' + result); // 3, 2, 4, 1
    }
    console.log('for end') // end for
}
forTest();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容