深入理解Promise.prototype.then：如何让链式调用按顺序执行

首先咱们得搞清楚为啥会出现这个顺序问题：你的hello()函数里虽然有个3秒的定时器，但它没有返回一个Promise。当第一个.then()调用hello()之后，因为hello()没有异步等待的逻辑，这个.then()会立刻执行完成，所以第二个.then()就直接跟着跑了，完全不等定时器里的输出。

要让第二个.then()严格等第一个.then()里的异步操作（也就是那个3秒定时器）完成后再执行，核心就是让第一个.then()返回一个会等待定时器结束的Promise。有两种常见的实现方式：

方式一：修改hello函数让它返回Promise #

这是最规范的做法，让异步函数本身返回Promise，方便后续复用：

// 修改hello函数，返回一个Promise
function hello(){
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("after 3sec");
      resolve(); // 定时器完成后，标记Promise为已完成
    }, 3000);
  });
}

let x = Promise.resolve()
x.then(() => { 
  return hello(); // 这里返回hello的Promise，让then链等待它完成
}).then(() => console.log("after 1st then"))

方式二：在第一个.then()里直接返回Promise（不修改原hello） #

如果不想改动原hello函数，也可以在.then()里包装一层Promise：

function hello(){ setTimeout(() => console.log("after 3sec"), 3000); }

let x = Promise.resolve()
x.then(() => {
  // 返回一个新的Promise，等待定时器完成
  return new Promise((resolve) => {
    hello();
    setTimeout(resolve, 3000);
  });
}).then(() => console.log("after 1st then"))

为什么这样能解决问题？ #

Promise链的规则是：每个.then()的回调如果返回一个Promise，那么下一个.then()会等待这个Promise的状态变为fulfilled（也就是调用resolve()之后）才会执行。这样就把异步操作的等待逻辑纳入了Promise链的控制中，保证了执行顺序。

测试一下修改后的代码，你会看到先输出after 3sec，3秒后再输出after 1st then，完全符合预期。

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