从零到Promise：可能是目前最易理解的手写实现指南

一、为什么需要手写Promise？

现代JavaScript开发中，Promise已成为处理异步操作的标准方案。但多数开发者仅停留在then/catch的表面使用，对底层机制缺乏深入理解。手写Promise实现的价值体现在：

1. 突破认知边界：理解状态机如何驱动异步流程
2. 调试能力提升：精准定位回调地狱、内存泄漏等问题
3. 面试核心竞争力：80%的中高级前端岗位考察Promise原理
4. 自定义扩展：实现延迟解析、重试机制等高级功能

典型误区警示：曾有开发者误认为Promise.resolve()会立即执行回调，实际它只是启动微任务队列的入口。这种认知偏差会导致异步时序错误。

二、Promise核心机制三要素

1. 状态机模型（核心中的核心）

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
  constructor(executor) {
    this.state = PENDING;  // 初始状态
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];
  }
}

状态转换规则：

• PENDING → FULFILLED：执行器成功时触发，不可逆
• PENDING → REJECTED：执行器抛出异常时触发，不可逆
• 禁止反向转换：已解决状态不能变为拒绝

2. 执行器模式（立即执行机制）

constructor(executor) {
  try {
    executor(
      value => this.resolve(value),  // 成功回调
      reason => this.reject(reason)  // 失败回调
    );
  } catch (error) {
    this.reject(error);  // 同步错误捕获
  }
}

关键特性：

• 同步执行：创建Promise实例时立即运行执行器
• 错误穿透：执行器内的同步错误会自动转为rejected状态
• 参数透传：resolve/reject的参数会传递给后续处理函数

3. 微任务队列（异步处理基石）

实际实现中需使用queueMicrotask或MutationObserver模拟微任务：

resolve(value) {
  if (this.state === PENDING) {
    queueMicrotask(() => {  // 放入微任务队列
      if (this.state === PENDING) {
        this.state = FULFILLED;
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    });
  }
}

与宏任务的本质区别：

• 执行优先级：微任务在同步代码后、宏任务前执行
• 任务隔离：单个事件循环中会清空所有微任务

三、完整实现分步解析

1. 基础框架搭建

class MyPromise {
  static PENDING = 'pending';
  static FULFILLED = 'fulfilled';
  static REJECTED = 'rejected';
  constructor(executor) {
    this.state = MyPromise.PENDING;
    this.value = undefined;
    this.reason = undefined;
    this.callbacks = [];
    const resolve = value => {
      if (this.state === MyPromise.PENDING) {
        this.state = MyPromise.FULFILLED;
        this.value = value;
        this.callbacks
          .filter(({ onFulfilled }) => onFulfilled)
          .forEach(({ onFulfilled }) => onFulfilled(value));
      }
    };
    // reject实现类似...
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
}

2. then方法实现（链式调用核心）

then(onFulfilled, onRejected) {
  return new MyPromise((resolve, reject) => {
    const handleFulfilled = value => {
      try {
        if (typeof onFulfilled === 'function') {
          const result = onFulfilled(value);
          resolve(result);  // 返回值处理
        } else {
          resolve(value);  // 透传处理
        }
      } catch (err) {
        reject(err);
      }
    };
    // 类似实现handleRejected...
    if (this.state === MyPromise.FULFILLED) {
      queueMicrotask(() => handleFulfilled(this.value));
    } else if (this.state === MyPromise.REJECTED) {
      queueMicrotask(() => handleRejected(this.reason));
    } else {
      this.callbacks.push({ onFulfilled, onRejected });
    }
  });
}

关键设计点：

• 返回值穿透：当onFulfilled不是函数时，直接传递value
• 错误边界：使用try-catch包裹处理函数
• 异步调度：使用queueMicrotask确保异步执行

3. 静态方法实现（Promise.resolve等）

static resolve(value) {
  if (value instanceof MyPromise) {
    return value;
  }
  return new MyPromise(resolve => resolve(value));
}
static all(promises) {
  return new MyPromise((resolve, reject) => {
    const results = [];
    let completed = 0;
    promises.forEach((promise, index) => {
      MyPromise.resolve(promise).then(
        value => {
          results[index] = value;
          if (++completed === promises.length) {
            resolve(results);
          }
        },
        reject
      );
    });
  });
}

四、调试与优化技巧

1. 状态可视化工具

class DebugPromise extends MyPromise {
  constructor(executor) {
    super(executor);
    this.debugLog = [];
  }
  resolve(value) {
    this.debugLog.push(`Resolve to ${value} at ${Date.now()}`);
    super.resolve(value);
  }
  // 类似扩展reject方法...
}

2. 常见问题解决方案

问题1：then回调未执行

• 检查：是否在pending状态时添加回调
• 解决：确保在构造函数中初始化callbacks数组

问题2：内存泄漏

• 检查：是否未清除已完成Promise的引用
• 解决：实现弱引用或手动清理机制

问题3：执行顺序错乱

• 检查：是否错误使用setTimeout代替微任务
• 解决：使用queueMicrotask或Promise.resolve().then()

五、进阶实践案例

1. 带取消功能的Promise

class CancelablePromise extends MyPromise {
  constructor(executor) {
    super((resolve, reject) => {
      this.cancel = () => {
        if (this.state === MyPromise.PENDING) {
          this.state = MyPromise.REJECTED;
          this.reason = new Error('Promise canceled');
          // 触发拒绝回调...
        }
      };
      executor(resolve, reject);
    });
  }
}

2. 重试机制实现

function retryPromise(promiseFn, maxRetries) {
  return new MyPromise((resolve, reject) => {
    const attempt = () => {
      promiseFn()
        .then(resolve)
        .catch(err => {
          if (maxRetries-- > 0) {
            attempt();
          } else {
            reject(err);
          }
        });
    };
    attempt();
  });
}

六、学习路径建议

1. 基础验证：先实现只有resolve的简化版Promise
2. 功能叠加：逐步添加reject、then、catch方法
3. 标准对齐：对照Promise/A+规范进行测试
4. 性能优化：实现then的返回值优化、错误堆栈追踪
5. 生态扩展：开发Promise.allSettled、Promise.any等扩展方法

推荐学习资源：

• Promise/A+规范官方文档
• 《JavaScript高级程序设计》异步编程章节
• Node.js源码中的promise实现

通过这种渐进式的学习方法，开发者可以在3-5天内完全掌握Promise的核心原理，并具备独立实现和调试复杂异步流程的能力。手写Promise不仅是技术深度的体现，更是构建可靠异步系统的基石。