如何让一个Promise在另一个Promise resolve后执行？代码异常排查

核心误区：Promise创建即执行 #

你误解了Promise的执行时机——当你用new Promise()创建一个Promise对象时，它内部的 executor 函数（就是你传的(res, rej) => {...}）会立刻同步执行，根本不会等到你调用.then()或者await的时候才启动任务。

看你的代码：

const task1 = new Promise((res, rej) => {
  setTimeout(() => res('one'), 5000)
})

const task2 = new Promise((res, rej) => {
  setTimeout(() => res('two'), 5000)
})

这两行代码一执行，task1和task2内部的定时器就同时开始计时了，两者的5秒是并行跑的，不是先后顺序。

解释你的两段代码行为 #

1. .then()链的情况 #

• 5秒后，task1和task2同时resolve。
• task1.then()触发时，task2已经是resolved状态了，所以你return Promise.resolve(task2)（等价于直接return task2）会立刻让下一个.then()拿到结果，自然5秒就输出了。

2. async/await的情况 #

• 同样，task1和task2的定时器一开始就并行跑了。
• await task1等待5秒完成，但这时候task2的5秒也已经跑完了，所以await task2根本不需要等，直接拿到结果，因此也是5秒输出。

如何实现串行执行（10秒后输出） #

如果想要让task2在task1完成后再启动，你需要延迟创建task2，比如把它放到task1的.then()回调里，或者放到await task1之后：

写法一：修改.then()链 #

const task1 = new Promise((res) => setTimeout(() => res('one'), 5000));

task1
.then(() => {
    // 直到task1完成，才创建task2并启动定时器
    const task2 = new Promise((res) => setTimeout(() => res('two'), 5000));
    return task2;
})
.then(res => console.log(res)); // 10秒后输出'two'

写法二：修改async/await函数 #

async function test() {
  try {
    // 先等task1完成（5秒）
    const res = await new Promise((res) => setTimeout(() => res('one'), 5000));
    // 再创建并等待task2（又5秒）
    const res2 = await new Promise((res) => setTimeout(() => res('two'), 5000));
    console.log(res2); // 10秒后输出'two'
  } catch (error) {
    console.error(error);
  }
}

test();

更优雅的写法：把任务封装成函数 #

如果需要多次复用任务，把它们写成返回Promise的函数，调用时才执行：

// 封装成函数，调用才创建Promise并启动定时器
const runTask1 = () => new Promise((res) => setTimeout(() => res('one'), 5000));
const runTask2 = () => new Promise((res) => setTimeout(() => res('two'), 5000));

async function test() {
  await runTask1(); // 先跑task1，等5秒
  const res2 = await runTask2(); // 再跑task2，又等5秒
  console.log(res2); // 10秒后输出
}

test();

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