如何组合返回Promise的函数以实现带依赖的异步系统调用？

嘿，这个需求太常见了！处理异步Promise的组合其实就分几种典型场景，我用你说的setTimeout模拟Promise来给你逐个演示，完全贴合你的测试和实际业务需求～

首先我们先写一个通用的模拟异步系统调用的函数，它接收延迟时间和返回数据，包裹setTimeout返回Promise：

// 模拟异步系统调用：延迟delay毫秒后返回指定数据
function asyncSystemCall(delay, returnData) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`延迟${delay}ms的调用完成`);
      resolve(returnData);
    }, delay);
  });
}

如果两个系统调用不需要互相等待，完全可以同时触发，用Promise.all来等待所有调用完成，效率更高：

// 并行执行两个异步调用
Promise.all([
  asyncSystemCall(5000, "第一个调用结果"),
  asyncSystemCall(3000, "第二个调用结果")
])
.then(([firstRes, secondRes]) => {
  // 所有调用完成后再处理提示，比如按顺序弹框
  alert(firstRes);
  setTimeout(() => alert(secondRes), 0);
})
.catch((error) => console.error("异步调用出错：", error));

注意：Promise.all会等待最慢的那个调用完成，这里5秒后两个结果都会返回，因为3秒的调用早就完成了，只是在等5秒的。

如果必须先执行完第一个再执行第二个（比如你说的按5秒、3秒间隔弹提示），用.then链式调用或者async/await都可以：

用.then链式写法： #

// 先执行5秒的调用，完成后弹提示，再执行3秒的调用
asyncSystemCall(5000, "第一个提示框内容")
.then((res) => {
  alert(res);
  // 返回第二个Promise，继续链式调用
  return asyncSystemCall(3000, "第二个提示框内容");
})
.then((res) => {
  alert(res);
})
.catch((error) => console.error("调用出错：", error));

用async/await写法（更直观）： #

async function sequentialCalls() {
  try {
    // 等待第一个调用完成
    const firstRes = await asyncSystemCall(5000, "第一个提示框内容");
    alert(firstRes);
    // 再执行第二个调用
    const secondRes = await asyncSystemCall(3000, "第二个提示框内容");
    alert(secondRes);
  } catch (error) {
    console.error("调用出错：", error);
  }
}

// 调用这个组合函数
sequentialCalls();

这是你提到的核心场景之一，比如第一个调用返回用户信息、配置参数，第二个调用需要用这些数据来执行。写法和顺序执行类似，只是把第一个的结果传给第二个函数：

async function dependentCalls() {
  try {
    // 第一个调用返回包含后续延迟时间和提示内容的数据
    const firstResult = await asyncSystemCall(5000, {
      message: "欢迎使用系统",
      nextDelay: 3000
    });
    alert(firstResult.message);
    
    // 用第一个返回的延迟时间执行第二个调用，同时传递依赖的数据
    const secondResult = await asyncSystemCall(
      firstResult.nextDelay,
      `后续提示：基于第一个结果生成`
    );
    alert(secondResult);
  } catch (error) {
    console.error("调用出错：", error);
  }
}

dependentCalls();

根据你的需求选择对应的方式：

• 无依赖、追求效率：用Promise.all并行执行
• 需顺序但无依赖：.then链式或async/await顺序等待
• 顺序且有依赖：在.then中传递前一个结果，或用await接收后传给下一个调用

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