手写Promise与Promises/A+规范实战：从零实现到测试通过

一、为什么需要手写Promise？

Promise作为JavaScript异步编程的核心解决方案，其设计原理涉及状态管理、异步链式调用、错误处理等关键机制。尽管现代开发中直接使用原生Promise或async/await已足够，但手写Promise实现具有以下价值：

1. 深度理解异步机制：通过实现状态机（pending→fulfilled/rejected）、微任务队列等底层逻辑，掌握事件循环与异步调度的本质
2. 符合工业标准：Promises/A+规范定义了Promise的最小行为准则，实现该规范可确保与现有生态（如async库、测试工具）的兼容性
3. 定制化能力：在特定场景下（如性能优化、特殊错误处理），自定义Promise实现可能比原生实现更高效

二、Promise核心实现步骤

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);
    }
  }
}

关键点解析：

• 状态机设计：严格区分pending/fulfilled/rejected三种状态，且状态不可逆
• 异步回调队列：使用数组存储then方法注册的回调，在状态变更时批量执行
• 错误捕获：在executor执行时包裹try-catch，确保同步错误也能被捕获

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

then(onFulfilled, onRejected) {
  // 参数可选处理
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
  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;
}

设计要点：

• 异步调度：使用setTimeout将回调推入微任务队列（实际实现可用MutationObserver或MessageChannel模拟）
• 返回值处理：通过resolvePromise函数处理then返回值的各种情况（Promise/值/异常）
• 链式调用：每次then都返回新Promise，形成调用链

3. 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);
  }
}

规范要点：

• 类型判断：严格处理x为对象/函数的情况
• thenable对象支持：兼容非Promise但具有then方法的对象
• 一次调用保证：通过called标志防止多次resolve/reject
• 异常捕获：对then方法调用进行try-catch包装

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

1. 测试环境搭建

1. 安装测试工具：

   npm install promises-aplus-tests -D

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

module.exports = {
deferred: () => {
let resolve, reject;
const promise = new MyPromise((res, rej) => {
resolve = res;
reject = rej;
});
return {
promise,
resolve,
reject
};
}
};

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

3. 关键测试项解析

1. 状态变更测试：

   • 验证只能从pending变为fulfilled/rejected
   • 验证状态变更后不可逆

2. 链式调用测试：

   • 验证then方法返回新Promise
   • 验证返回值穿透（非Promise值直接传递）

3. 异常处理测试：

   • 验证同步错误捕获
   • 验证then回调中的异常传递

4. Promise解析测试：

   • 验证thenable对象的正确处理
   • 验证循环引用检测

四、性能优化与扩展实现

1. 微任务调度优化

原生Promise使用微任务队列，可通过以下方式模拟：

// 使用MutationObserver实现微任务
function asyncSchedule(fn) {
  const observer = new MutationObserver(fn);
  const node = document.createElement('div');
  observer.observe(node, { attributes: true });
  node.setAttribute('data', 'trigger');
}
// 或使用MessageChannel
const channel = new MessageChannel();
channel.port2.onmessage = fn;
channel.port1.postMessage(null);

2. 静态方法实现

// 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;
    promises.forEach((promise, index) => {
      MyPromise.resolve(promise).then(
        value => {
          results[index] = value;
          count++;
          if (count === promises.length) resolve(results);
        },
        reject
      );
    });
  });
}

五、实际开发中的注意事项

1. 与原生Promise的互操作：

   • 确保自定义Promise能与fetch、async/await等原生API协同工作
   • 处理第三方库返回的Promise时保持兼容性

2. 调试支持：

   • 添加Promise.prototype[Symbol.toStringTag] = ‘MyPromise’便于调试
   • 实现catch方法的便捷调用

3. 性能基准测试：

   • 使用JSPerf对比自定义实现与原生Promise的性能差异
   • 重点关注then方法调用和状态变更的耗时

六、完整实现代码示例

完整实现代码仓库包含：

1. 核心Promise类实现
2. 所有静态方法
3. 测试适配文件
4. 性能测试脚本

通过本文的实现，开发者不仅能深入理解Promise的工作原理，更能掌握如何实现符合工业标准的异步解决方案。这种从底层到上层的完整实践，对于提升JavaScript异步编程能力具有重要价值。