JS处理多个异步任务的优雅方法 如何正确等待多个async函数结果

你当前的嵌套then写法存在几个明显问题：

• 两个异步请求是串行执行的，call2需要等call1完全返回后才会发起，会浪费不必要的等待时间
• 嵌套层级过深后会形成回调地狱，代码可读性和可维护性极差
• 依赖全局变量存储异步结果，容易出现变量污染、意外修改的问题

场景1：两个请求无依赖，可并行执行（推荐） #

如果call1和call2的执行没有先后依赖关系，优先用Promise.all实现并行请求，最大化请求效率：
首先建议先修改两个异步函数，直接返回请求结果，避免依赖全局变量：

async function call1() {
    return await $.ajax({url: `api/call1`});
};

async function call2() {
    return await $.ajax({url: `api/call2`});
};

用async/await语法实现（最简洁） #

let somevar = async function () {
    // 同时发起两个请求，等所有请求返回后再往下执行
    const [data1, data2] = await Promise.all([call1(), call2()]);
    console.log("call1", data1, "call2", data2);
    // 可在此处处理两个请求的返回结果
};

用then链式写法实现 #

let somevar = function () {
    Promise.all([call1(), call2()])
        .then(([data1, data2]) => {
            console.log("call1", data1, "call2", data2);
        })
        // 建议添加异常捕获，避免请求报错抛出未处理异常
        .catch(err => {
            console.error('请求执行出错：', err);
        });
};

场景2：两个请求有依赖，必须串行执行 #

如果call2的执行依赖call1的返回结果，必须等call1执行完才能发起call2，可以用串行await写法，完全避免嵌套：

let somevar = async function () {
    try {
        const data1 = await call1();
        // 可在此处拿data1的结果处理call2的请求参数
        const data2 = await call2();
        console.log("call1", data1, "call2", data2);
    } catch (err) {
        console.error('请求执行出错：', err);
    }
};

补充说明 #

• Promise.all的特性是所有输入的Promise全部成功才会返回成功结果，只要有一个请求失败就会直接进入异常分支。如果你需要即使部分请求失败，也要拿到其他请求的返回结果，可以替换为Promise.allSettled
• 所有异步操作建议都添加异常捕获逻辑，避免未处理的Promise异常导致程序运行问题

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