使用Promise.all执行异步返回列表的函数时第二个列表为undefined如何解决

代码错误点 #

• 期望通过Promise.all同时执行两个异步函数，但实际参数数组仅传入firstList()，未包含secondList()
• 第一个then回调中调用secondList()后未将其返回，导致下一个then接收到的messages为默认的undefined
• 异步后续操作（闭合div、拼接内容）必须放在所有异步完成的回调内部，放在外部会在异步返回结果前提前执行，无法拿到完整内容

方案1：用Promise.all并行执行两个异步函数（性能更优，符合最初需求） #

两个异步函数同时发起调用，全部返回结果后再统一拼接内容：

let content = "<div class='clsLines'>";

// Promise.all数组中同时传入两个返回Promise的异步函数
return Promise.all([
    firstList(),
    secondList()
]).then(([firstRes, secondRes]) => {
    content += firstRes;
    content += secondRes;
    content += "</div>";
    $('#id').find('.cls').append(content);
});

方案2：串行执行两个异步函数（需先跑firstList再跑secondList时使用） #

如果业务要求第二个函数必须等第一个执行完成再调用，需在then中显式返回下一个异步Promise：

let content = "<div class='clsLines'>";

return firstList()
.then((firstRes) => {
    content += firstRes;
    // 必须返回secondList的Promise，下一个then才能拿到它的返回值
    return secondList();
}).then((secondRes) => {
    content += secondRes;
    content += "</div>";
    $('#id').find('.cls').append(content);
});

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