异步调用收集结果时函数运行缓慢，如何优化提速？

原始代码 #

const services = ['a', 'b', 'c', 'd'];

async function foo(service) {
    // 获取单个jobUrl数据的函数，后续通过map批量调用
    const getJob = async ({ url: jobUrl }) => {
        const response = await fetch(jobUrl, { headers: headers });
        const { result, timestamp: timeStamp } = await response.json();
        if (result === 'SUCCESS') {
            return { jobUrl, timeStamp };
        }
    };

    // 查询目标服务的任务列表
    let url = `http://example.com`;
    const response = await fetch(url, { method: 'POST', headers: headers });
    const { jobs } = await response.json();

    const unfiltered = await Promise.all(jobs.map(getJob));
    const successful = unfiltered.filter(v => v);

    let latestJob = successful.sort((obj1, obj2) => obj2.timeStamp - obj1.timeStamp)[0].jobUrl;
    let arr = latestJob.split('/');
    let recent = { service: service, job: arr[arr.length - 2] };
    // console.log(recent);
    return recent; 
}

问题场景 #

直接循环调用foo时，4个异步任务是并行发起的，总耗时仅4秒：

for (const service of services) {
    foo(service);
}

但如果要收集每个foo的返回结果，用for...of逐个await的方式会变成串行执行（必须等前一个foo完成才会调用下一个），总耗时飙升至15-16秒：

const latest = [];
for (const service of services) {
    latest.push(await foo(service));
}

优化方案 #

要兼顾结果收集和并行效率，直接用Promise.all批量处理所有异步任务即可：

// 先为每个service生成对应的foo调用Promise
const taskPromises = services.map(service => foo(service));
// 一次性等待所有任务完成，同时按顺序收集结果
const latest = await Promise.all(taskPromises);

这样所有foo调用会同时发起并行执行，总耗时和第一种无结果收集的方式基本一致，而且返回的latest数组顺序和services完全对应，能直接拿到所有服务的最新任务数据。

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