JavaScript嵌套Promise未按预期顺序执行问题求助

嘿，你的代码里的关键错误很明显——在func1().then(func2())这一行，你直接执行了func2()，而不是把它作为回调函数传递给then方法。

为什么顺序不对？ #

JavaScript在执行then(func2())的时候，会先计算括号里的表达式，也就是立刻调用func2()，完全不等func1的Promise完成。实际执行流程是这样的：

• 调用func1()，打印func1 start
• 调用thirdPartyAPIMethod()返回一个已resolved的Promise，但它的then回调会被放到微任务队列，不会立刻执行
• 执行then(func2())时，先跑func2()，打印func2 start和func2 end
• 当前同步代码执行完，才会去处理微任务队列，打印func1 end

这就是为什么你的输出顺序和预期不符。

怎么改？ #

把func2()改成func2（去掉后面的括号），这样then就会把func2当作回调函数，等func1的Promise完全resolved之后再执行它：

function thirdPartyAPIMethod() { // 返回Promise的模拟方法
  return Promise.resolve();
}
function func1() {
  console.log("func1 start");
  return thirdPartyAPIMethod().then(() => {
    console.log("func1 end");
    // ... resolve();
  });
}
function func2() {
  console.log("func2 start");
  // ...
  console.log("func2 end");
}
func1().then(func2); // 这里去掉func2的括号！

修正后的执行顺序 #

1. 调用func1()，打印func1 start
2. thirdPartyAPIMethod()返回resolved Promise，其回调进入微任务队列
3. func1()返回的Promise处于pending状态，then(func2)只是注册回调，不会执行func2
4. 同步代码执行完毕，处理微任务队列，打印func1 end
5. func1的Promise完成，触发then里的func2，依次打印func2 start和func2 end

这样就完全符合你想要的顺序啦！

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