完整实现Promises/A+规范

从零开始手写一个完全符合Promises/A+规范的Promise实现,理解Promise的原理和异步编程机制

问题

Promise是JavaScript中处理异步操作的重要机制。本题要求完整实现符合Promises/A+规范的Promise,包括:

  • Promise的三种状态管理(pending、fulfilled、rejected)
  • then方法的链式调用
  • 值穿透和错误传递
  • 异步执行和微任务队列
  • Promise解决过程(Promise Resolution Procedure)

解答

// Promise的三种状态
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 = []; // 失败回调队列

    // resolve函数
    const resolve = (value) => {
      // 只有pending状态才能转换
      if (this.state === PENDING) {
        this.state = FULFILLED;
        this.value = value;
        // 执行所有成功回调
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };

    // reject函数
    const reject = (reason) => {
      // 只有pending状态才能转换
      if (this.state === PENDING) {
        this.state = REJECTED;
        this.reason = reason;
        // 执行所有失败回调
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };

    // 执行executor,捕获异常
    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  // then方法
  then(onFulfilled, onRejected) {
    // 参数校验,确保是函数(实现值穿透)
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };

    // 返回新的Promise实现链式调用
    const promise2 = new MyPromise((resolve, reject) => {
      
      // 封装fulfilled状态的处理逻辑
      const fulfilledMicrotask = () => {
        // 使用queueMicrotask模拟微任务
        queueMicrotask(() => {
          try {
            const x = onFulfilled(this.value);
            // Promise解决过程
            resolvePromise(promise2, x, resolve, reject);
          } catch (error) {
            reject(error);
          }
        });
      };

      // 封装rejected状态的处理逻辑
      const rejectedMicrotask = () => {
        queueMicrotask(() => {
          try {
            const x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (error) {
            reject(error);
          }
        });
      };

      // 根

目录