JavaScript中.then()内调用两个Promise的异常问题排查与解决

嘿，这个问题我之前调试Promise的时候也踩过坑！你之所以只看到最后一个Promise的结果，核心原因是没有正确地并行等待两个Promise完成，反而让它们的执行和结果处理变成了“各走各的”，甚至只等待了其中一个的结果。

先说说你可能的错误写法 #

大概率你是类似这样写的：

// 错误示例：只等待了tgApiPromise，ig的日志可能被跳过或延迟
yourInitialPromise.then(() => {
  // 启动ig的Promise，但没等它完成就继续走了
  igApiPromise.then(igResponse => {
    console.log('igResponse', igResponse.length);
  });
  // 只把tg的Promise返回给外层链式调用，所以外层只等它
  return tgApiPromise;
}).then(tgResponse => {
  console.log('tgResponse', tgResponse.length);
});

这种情况下，igApiPromise确实会执行，但它的回调是独立的异步任务——如果tgApiPromise先完成，你的日志会先打印tg的结果，要是你的运行环境（比如Node.js脚本）在打印完tg的日志后就结束了，那ig的日志根本没机会执行，看起来就像是被“跳过”了。

正确的解决方式：用Promise.all()实现并行等待 #

要让两个Promise真正并行执行，并且确保它们都成功后再打印结果，Promise.all()是最佳选择。它会同时触发所有传入的Promise，等全部完成后再返回所有结果的数组。

修改后的代码应该是这样的：

// 假设你的初始Promise叫mainPromise
mainPromise.then(() => {
  // 用Promise.all包裹两个要并行的Promise
  return Promise.all([igApiPromise, tgApiPromise]);
}).then(([igResponse, tgResponse]) => {
  // 解构拿到两个结果，顺序和Promise.all里的顺序一致
  console.log('igResponse', igResponse.length);
  console.log('tgResponse', tgResponse.length);
}).catch(error => {
  // 别忘了统一捕获错误，任何一个Promise失败都会走到这里
  console.error('请求出错了:', error);
});

如果你的环境支持ES2017+，用async/await写会更清晰易懂：

async function handleResponses() {
  try {
    // 先等初始Promise完成
    await mainPromise;
    // 并行等待两个API Promise完成
    const [igResponse, tgResponse] = await Promise.all([igApiPromise, tgApiPromise]);
    // 两个结果都拿到了，放心打印
    console.log('igResponse', igResponse.length);
    console.log('tgResponse', tgResponse.length);
  } catch (error) {
    console.error('出问题了:', error);
  }
}

handleResponses();

为什么这能解决问题？ #

1. 并行执行：Promise.all()会同时启动所有传入的Promise，不会等一个完成再启动另一个，效率更高。
2. 统一等待：只有当两个Promise都成功fulfill时，才会进入.then()（或await后的代码），确保你能同时拿到两个结果，不会出现一个日志被跳过的情况。
3. 错误统一处理：如果任何一个Promise失败，Promise.all()会立即触发错误捕获，避免遗漏错误处理。

额外提醒 #

• 确保igApiPromise和tgApiPromise是可执行的Promise实例（如果是函数的话要记得调用，比如igApiPromise()）。
• 永远不要忽略错误处理，哪怕你觉得两个Promise肯定会成功——万一API超时或者返回错误，你的代码不会直接崩溃。

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