如何实现一个简化版Promise并支持then链式调用？

Question

在实现简化版 Promise 时，一个常见问题是：如何确保 `then` 方法返回一个新的 Promise 实例，从而支持链式调用？许多初学者直接在 `then` 中返回 `this`，导致多个 `then` 回调相互影响，违背了 Promise 的隔离原则。正确的做法是让 `then` 总是返回一个新的 Promise，并根据当前 Promise 的状态异步执行成功或失败回调，同时处理返回值的传递与错误冒泡。这要求正确实现状态迁移、回调队列以及 `onFulfilled` 和 `onRejected` 的异步执行机制。

Answer 1

一、Promise 链式调用的本质：为何不能返回 this？

在实现简化版 Promise 时，一个常见误区是直接在 then 方法中返回 this。这种做法看似实现了链式调用，实则破坏了 Promise 的隔离性原则。

例如：

class BadPromise {
  then(onFulfilled) {
    // ❌ 错误示范：返回自身
    this.onFulfilledCallback = onFulfilled;
    return this; // 多个 then 共享状态，回调被覆盖
  }
}
  

当多个 then 被注册时，它们会共享同一个实例的回调队列，导致前一个回调被后一个覆盖，无法实现真正的异步链式传递。

正确做法是：每次调用 then 都应返回一个全新的 Promise 实例，形成独立的执行路径，从而支持值传递与错误冒泡。

二、核心机制解析：状态迁移与回调队列

Promise 的核心在于其三种状态：pending、fulfilled 和 rejected，且状态只能单向迁移。

当前状态	可迁移到	不可逆操作
pending	fulfilled / rejected	-
fulfilled	-	不能再变为 rejected 或 pending
rejected	-	不能再变为 fulfilled 或 pending

当 Promise 处于 pending 状态时，then 注册的回调需缓存至队列中；一旦状态变更，立即异步执行对应队列中的回调函数。

三、then 方法的设计原则与实现逻辑

根据 Promises/A+ 规范，then 方法必须返回一个新的 Promise，以确保：

• 每个链式节点独立，互不影响
• 支持异步值的传递（resolve chaining）
• 异常能通过 onRejected 向下冒泡
• 回调始终异步执行（即使同步 resolve）

以下是关键实现片段：

then(onFulfilled, onRejected) {
  const promise = new MyPromise((resolve, reject) => {
    // 封装处理逻辑，延迟绑定
    this._handle({
      onFulfilled: this._wrapCallback(onFulfilled),
      onRejected: this._wrapCallback(onRejected),
      resolve,
      reject
    });
  });
  return promise;
}
  

四、回调处理流程与异步调度机制

为了保证回调的异步执行（即“microtask”语义），我们使用 queueMicrotask 或 Promise.resolve().then() 模拟。

以下是状态分发的核心逻辑：

_handle(callbackObj) {
  if (this._state === 'pending') {
    this._callbacks.push(callbackObj);
    return;
  }

  const fn = this._state === 'fulfilled' 
    ? callbackObj.onFulfilled 
    : callbackObj.onRejected;

  queueMicrotask(() => {
    try {
      const result = fn(this._value);
      callbackObj.resolve(result);
    } catch (e) {
      callbackObj.reject(e);
    }
  });
}
  

五、错误冒泡与值穿透机制实现

在链式调用中，若某一步未提供 onRejected，错误应自动向下传递。这要求对回调做容错包装：

_wrapCallback(cb) {
  return typeof cb === 'function' 
    ? cb 
    : (value) => { throw value; }; // 默认抛出错误
}
  

同时，若回调返回的是另一个 Promise，则需进行“thenable 解包”，实现扁平化链式结构：

if (result instanceof MyPromise) {
  result.then(callbackObj.resolve, callbackObj.reject);
} else {
  callbackObj.resolve(result);
}
  

六、完整流程图：从 then 调用到回调执行

graph TD
      A[调用 then] --> B{当前状态?}
      B -->|pending| C[缓存回调到队列]
      B -->|fulfilled| D[异步执行 onFulfilled]
      B -->|rejected| E[异步执行 onRejected]
      D --> F[处理返回值]
      E --> G[捕获异常并 reject 新 Promise]
      F --> H{返回值是否为 Promise?}
      H -->|是| I[链式解包 thenable]
      H -->|否| J[resolve 新 Promise]
      C --> K[状态变更时触发队列执行]

七、边界情况与高级考量

在生产级实现中还需考虑：

1. 递归 Promise 引用（如 return 自身）需抛出 TypeError
2. thenable 对象的兼容性处理（鸭子类型判断）
3. 性能优化：避免无限嵌套解析
4. 调试支持：添加堆栈追踪信息
5. race、all 等组合器对接一致性
6. 取消信号（AbortSignal）集成可能性
7. 内存泄漏防范：及时清空已执行的回调引用
8. 跨平台微任务调度统一封装
9. Symbol.toStringTag 等元信息支持
10. 严格模式下的 this 安全检测