Promise(1)-手写Promise：从原理到实现的深度解析

一、Promise的核心价值与实现意义

Promise作为JavaScript异步编程的基石，解决了回调地狱（Callback Hell）问题，通过统一的接口规范和链式调用机制，使异步代码更易读、可维护。手写Promise不仅是理解其工作原理的最佳途径，更是提升代码设计能力的关键训练。本文将从零开始实现一个符合Promise/A+规范的简化版Promise，重点解析状态管理、异步任务调度和链式调用的核心逻辑。

1.1 Promise的三大核心特性

• 状态机机制：Promise必须处于pending、fulfilled或rejected三种状态之一，且状态一旦改变不可逆。
• 异步通知：通过then方法注册的回调函数必须在当前调用栈清空后执行（微任务队列）。
• 链式调用：每次调用then方法需返回一个新的Promise，实现异步任务的线性组合。

1.2 手写实现的必要性

原生Promise虽功能完善，但隐藏了实现细节。手写过程能暴露以下关键问题：

• 如何保证状态变更的原子性？
• 异步回调的执行时机如何控制？
• 链式调用中值穿透（Value Chaining）的机制是什么？

二、Promise基础结构实现

2.1 构造函数与状态管理

class MyPromise {
  constructor(executor) {
    this.state = 'pending'; // 初始状态
    this.value = undefined; // 成功值
    this.reason = undefined; // 失败原因
    this.onFulfilledCallbacks = []; // 成功回调队列
    this.onRejectedCallbacks = []; // 失败回调队列
    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };
    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
}

关键点解析：

• 状态变更需通过resolve/reject方法显式触发，且仅在pending状态下有效。
• 回调队列（onFulfilledCallbacks/onRejectedCallbacks）用于存储异步注册的回调函数。
• 执行器（executor）中的同步错误需通过try-catch捕获并转为rejected状态。

2.2 then方法实现与链式调用

then(onFulfilled, onRejected) {
  // 参数默认值处理（Promise/A+规范要求）
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };
  const promise2 = new MyPromise((resolve, reject) => {
    if (this.state === 'fulfilled') {
      setTimeout(() => { // 模拟微任务队列（实际需用MutationObserver或queueMicrotask）
        try {
          const x = onFulfilled(this.value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      }, 0);
    } else if (this.state === 'rejected') {
      setTimeout(() => {
        try {
          const x = onRejected(this.reason);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      }, 0);
    } else if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(() => {
        setTimeout(() => {
          try {
            const x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
      this.onRejectedCallbacks.push(() => {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
    }
  });
  return promise2;
}

链式调用核心逻辑：

1. 每次调用then返回一个新的Promise（promise2），实现链式传递。
2. 根据当前状态（fulfilled/rejected/pending）决定回调执行时机。
3. 通过setTimeout模拟微任务队列（实际开发中需替换为queueMicrotask）。

2.3 resolvePromise：处理链式调用的值穿透

function resolvePromise(promise2, x, resolve, reject) {
  // 防止循环引用
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  // 防止多次调用
  let called = false;
  if ((typeof x === 'object' && x !== null) || typeof x === 'function') {
    try {
      const then = x.then;
      if (typeof then === 'function') {
        then.call(
          x,
          y => {
            if (called) return;
            called = true;
            resolvePromise(promise2, y, resolve, reject);
          },
          r => {
            if (called) return;
            called = true;
            reject(r);
          }
        );
      } else {
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else {
    resolve(x);
  }
}

值穿透规则：

• 若x为普通值，直接resolve(x)。
• 若x为Promise或具有then方法的对象，递归解析其状态。
• 严格防止循环引用和重复调用。

三、Promise/A+规范兼容性扩展

3.1 静态方法实现

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

3.2 微任务队列优化

实际开发中需替换setTimeout为真正的微任务API：

// 使用queueMicrotask（现代浏览器支持）
const microtaskQueue = [];
queueMicrotask(() => {
  while (microtaskQueue.length) {
    const callback = microtaskQueue.shift();
    callback();
  }
});
// 修改then方法中的异步执行部分
setTimeout(() => { /* ... */ }, 0); 
// 替换为
microtaskQueue.push(() => { /* ... */ });

四、手写Promise的实践价值

1. 调试能力提升：通过自定义日志输出，精准定位异步流程中的问题。
2. 性能优化：避免原生Promise的冗余封装，针对特定场景优化。
3. 教学意义：帮助团队成员深入理解异步编程范式。

示例：添加调试日志的Promise

class DebugPromise extends MyPromise {
  constructor(executor) {
    super(executor);
    this.log = [];
  }
  then(onFulfilled, onRejected) {
    const promise2 = super.then(
      (value) => {
        this.log.push(`Fulfilled with: ${value}`);
        return onFulfilled(value);
      },
      (reason) => {
        this.log.push(`Rejected with: ${reason}`);
        return onRejected(reason);
      }
    );
    return promise2;
  }
}

五、总结与进阶方向

手写Promise完整实现了状态管理、异步调度和链式调用的核心逻辑，但仍有优化空间：

1. 兼容性：处理更多边界情况（如then方法中抛出异常）。
2. 性能：使用更高效的微任务调度方案。
3. 扩展性：支持取消Promise、超时控制等高级功能。

通过本文的学习，开发者不仅能掌握Promise的底层原理，更能获得设计复杂异步系统的能力。建议结合Promise/A+规范测试用例（如promises-aplus-tests）验证实现正确性，为后续学习Async/Await和RxJS等高级异步方案打下坚实基础。