Promise处于pending状态时，链式调用中的第二个then会如何处理？

问题代码 #

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data 1st"), 1000)
})
.then((data) => {   // 第一个then回调
    console.log(data)
    return new Promise((resolve, reject) => { // 内部返回的Promise
        setTimeout(() => resolve("Data 2nd"), 1000)
    })
}).then((data) => {  // 第二个then回调
    console.log(data)
})

你的理解与疑问 #

• 创建Promise对象p1；
• 第一个.then()的回调函数会被存储，待resolve执行时触发；
• 疑问：第二个.then()调用时，原Promise仍处于pending状态，第一个.then()的代码还没执行，也没生成内部返回的Promise，那这个第二个.then()是怎么被关联和触发的？

核心逻辑解析 #

标准Promise的then方法本质 #

每个.then()调用都会返回一个全新的Promise对象，而非原Promise。这是解开你疑惑的关键：第二个.then()并不是挂载在p1或者内部返回的Promise上，而是挂载在第一个.then()返回的新Promise上。

完整执行流程 #

1. 初始化p1，进入pending状态，1秒后会resolve出"Data 1st"。
2. 调用p1.then(第一个回调)：
   • 这个.then()立即返回一个新的Promise（记为p2）；
   • 第一个回调被存储到p1的回调队列中，等待p1 resolve时触发。
3. 紧接着调用p2.then(第二个回调)：
   • 此时p2处于pending状态；
   • 这个.then()又返回一个新的Promise（记为p3）；
   • 第二个回调被存储到p2的回调队列中。
4. 1秒后p1 resolve，触发第一个回调：
   • 打印"Data 1st"，随后返回一个内部Promise（记为pInner）；
   • 此时p2的状态会完全跟随pInner：当pInner在1秒后resolve出"Data 2nd"时，p2会同步resolve，并把"Data 2nd"作为参数传递给自身队列中的第二个回调。
5. 第二个回调触发，打印"Data 2nd"。

结合简易Promise实现分析 #

你提供的简易实现是简化版，虽然和标准Promise行为有差异，但能帮你理解回调存储的基础逻辑：

class PromiseSimple {
    constructor(执行函数) {
      this.回调链 = [];
      this.错误处理函数 = () => {};
  
      this.处理成功 = this.处理成功.bind(this);
      this.处理失败 = this.处理失败.bind(this);
  
      执行函数(this.处理成功, this.处理失败);
    }
  
    then(成功处理函数) {
      // 不管当前Promise状态如何，直接将回调加入链中
      this.回调链.push(成功处理函数);
      // 简化实现：返回自身，而非新Promise
      return this;
    }
  
    catch(错误处理函数) {
      this.错误处理函数 = 错误处理函数;
      return this;
    }
  
    处理成功(值) {
      let 当前值 = 值;
      try {
        // 依次执行链中所有回调，传递返回值
        this.回调链.forEach((下一个函数) => {
          当前值 = 下一个函数(当前值);
        });
      } catch (错误) {
        this.回调链 = [];
        this.处理失败(错误);
      }
    }
  
    处理失败(错误) {
      this.错误处理函数(错误);
    }
  }

注意：这个简化版的then返回自身，无法处理"回调返回Promise"的异步等待场景——而标准Promise通过每个then返回新Promise的设计，完美解决了这种异步嵌套的链式触发问题。

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