如何让代码等待Promise.all()及内部work()执行完成后再执行后续语句？

原代码的核心问题在于：Promise.all([promise1, promise2, promise3])完成后，then回调里用forEach调用异步函数work()时，没有等待work()返回的Promise执行完成。forEach不会处理异步任务的等待逻辑，回调会直接结束，导致外层的await仅等待Promise.all本身完成，不等所有work()执行完毕就走到了console.log('FINISH')。

下面提供两种符合需求的实现方式：

方式一：并行执行所有work（效率优先） #

将所有work()调用转换为Promise数组，再用Promise.all等待全部完成，这种方式下所有work会同时启动，总耗时约2秒。

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

async function work() {
    await new Promise((resolve, reject) => {
        setTimeout(resolve, 2000, 'foo');
    })
    console.log('some work here')
}

async function main() {
    const values = await Promise.all([promise1, promise2, promise3]);
    // 先同步输出所有结果项
    values.forEach(item => console.log(item));
    // 并行执行所有work，等待全部完成
    await Promise.all(values.map(() => work()));
    console.log('FINISH')
}

main()

方式二：串行执行work（顺序优先） #

如果需要work按顺序逐个执行（前一个完成后再启动下一个），可以使用for...of循环配合await，总耗时约6秒。

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

async function work() {
    await new Promise((resolve, reject) => {
        setTimeout(resolve, 2000, 'foo');
    })
    console.log('some work here')
}

async function main() {
    const values = await Promise.all([promise1, promise2, promise3]);
    for (const item of values) {
        console.log(item);
        await work(); // 等待当前work执行完成再进入下一次循环
    }
    console.log('FINISH')
}

main()

内容的提问来源于stack exchange，提问作者Subham Sarkar