手写Promise全解析：从零实现到通过Promises/A+测试

一、为何要手写Promise？

Promise作为现代JavaScript异步编程的核心，其内部机制对开发者理解异步流程至关重要。手写Promise不仅能加深对Promise工作原理的理解，更是掌握JavaScript事件循环、微任务队列等底层概念的最佳途径。此外，实现符合Promises/A+规范的Promise类，能确保你的代码与所有遵循该标准的库（如axios、bluebird等）无缝兼容。

核心价值：

1. 深入理解异步机制：通过实现状态转换、微任务调度等逻辑，掌握Promise如何解决回调地狱问题
2. 提升代码质量：理解规范要求能避免常见实现错误，如thenable对象处理不当、状态错误变更等
3. 面试利器：手写Promise是前端高级工程师面试的经典考题，能全面考察JavaScript基础能力

二、Promise核心机制实现

1. 基础类结构

class MyPromise {
  constructor(executor) {
    this.state = 'pending'; // pending, fulfilled, rejected
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];
    try {
      executor(this.resolve.bind(this), this.reject.bind(this));
    } catch (err) {
      this.reject(err);
    }
  }
  // 状态变更方法将后续实现
  resolve(value) { /* ... */ }
  reject(reason) { /* ... */ }
}

关键点解析：

• 初始状态必须为pending，这是规范要求的初始状态
• 需要维护两个回调队列，分别处理fulfilled和rejected状态的回调
• 执行器函数(executor)必须同步执行，错误需要被捕获并转为rejected状态

2. 状态管理实现

resolve(value) {
  if (this.state === 'pending') {
    this.state = 'fulfilled';
    this.value = value;
    this.onFulfilledCallbacks.forEach(fn => fn());
  }
}
reject(reason) {
  if (this.state === 'pending') {
    this.state = 'rejected';
    this.reason = reason;
    this.onRejectedCallbacks.forEach(fn => fn());
  }
}

规范要求：

• 状态一旦变更不可逆转（fulfilled/rejected → pending不允许）
• 同一Promise只能变更一次状态
• 变更后需要执行所有对应的回调函数

3. then方法实现

then(onFulfilled, onRejected) {
  // 参数可选处理
  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(() => {
        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. 异步调度：使用setTimeout将回调推入微任务队列（实际实现可用queueMicrotask）
2. 链式调用：每次then返回新Promise，实现链式调用
3. 错误处理：必须用try-catch包裹回调执行
4. 参数默认值：当不传回调时，需要提供默认的value传递和reason抛出

4. resolvePromise核心算法

function resolvePromise(promise2, x, resolve, reject) {
  // 防止循环引用
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  // 防止多次调用
  let called = false;
  if (x !== null && (typeof x === 'object' || 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);
  }
}

规范要点：

1. x为thenable对象：需要递归解析其then方法
2. 只允许调用一次：通过called标志防止多次resolve/reject
3. 错误处理：then方法执行出错应reject
4. 循环引用检测：防止promise2 === x的情况

三、Promises/A+测试实现指南

1. 测试环境搭建

1. 安装测试工具：

   npm install promises-aplus-tests -D

2. 创建适配接口：
   ```javascript
   const MyPromise = require(‘./my-promise’);

MyPromise.deferred = function() {
const result = {};
result.promise = new MyPromise((resolve, reject) => {
result.resolve = resolve;
result.reject = reject;
});
return result;
};

module.exports = MyPromise;

### 2. 运行测试
```bash
promises-aplus-tests ./my-promise-adapter.js

3. 常见测试失败点及修复

1. 状态不可变测试失败：

   • 问题：手动修改了已变更状态的promise
   • 修复：在resolve/reject方法中添加状态检查

2. thenable解析失败：

   • 问题：未正确处理then方法为getter属性的情况
   • 修复：使用Object.defineProperty测试getter场景

3. 异步调度失败：

   • 问题：使用同步方式执行回调
   • 修复：确保使用微任务调度（queueMicrotask/setTimeout）

四、进阶实现建议

1. 性能优化：

   • 使用更高效的微任务调度方案（如MutationObserver）
   • 避免不必要的数组遍历

2. 功能扩展：

   • 实现Promise.all/Promise.race等静态方法
   • 添加finally方法支持
   • 实现取消功能（需扩展规范）

3. 错误监控：

   • 添加全局未捕获reject处理
   • 实现Promise链的错误聚合

五、完整实现示例

class MyPromise {
  // ... 前文实现代码 ...
  // 静态方法实现
  static resolve(value) {
    if (value instanceof MyPromise) {
      return value;
    }
    return new MyPromise(resolve => resolve(value));
  }
  static reject(reason) {
    return new MyPromise((_, reject) => reject(reason));
  }
  static all(promises) {
    return new MyPromise((resolve, reject) => {
      const results = [];
      let completed = 0;
      if (promises.length === 0) {
        return resolve(results);
      }
      promises.forEach((promise, index) => {
        MyPromise.resolve(promise).then(
          value => {
            results[index] = value;
            completed++;
            if (completed === promises.length) {
              resolve(results);
            }
          },
          reject
        );
      });
    });
  }
  // ... 其他方法实现 ...
}
// 适配Promises/A+测试
MyPromise.deferred = function() {
  const result = {};
  result.promise = new MyPromise((resolve, reject) => {
    result.resolve = resolve;
    result.reject = reject;
  });
  return result;
};
module.exports = MyPromise;

六、总结与验证

实现符合Promises/A+规范的Promise类需要严格遵循以下核心原则：

1. 三种状态：必须正确管理pending/fulfilled/rejected状态转换
2. 异步执行：所有回调必须异步执行（微任务级别）
3. 链式调用：每次then返回新Promise，实现方法链
4. 值穿透：正确处理非Promise值的传递
5. 错误处理：完善的错误捕获和传递机制

通过promises-aplus-tests的283个测试用例验证，可以确保实现的正确性。实际开发中，建议先实现核心功能，再逐步完善边缘情况和性能优化。

验证建议：

1. 编写单元测试覆盖所有状态转换场景
2. 测试thenable对象的深度解析
3. 验证错误传播路径
4. 检查异步调度的顺序正确性

手写Promise不仅是技术挑战，更是深入理解JavaScript异步编程的绝佳途径。通过实现过程，你将获得对事件循环、执行上下文等底层概念的深刻理解，这对提升整体JavaScript开发水平具有重要价值。