logo

开发者热搜

手写Promise全解析：从基础实现到Promises/A+测试通关

作者：蛮不讲李2025.09.19 12:56浏览量：1

简介：本文深入解析如何手写实现Promise并满足Promises/A+规范，通过代码示例和测试用例详解核心机制，帮助开发者掌握异步编程的底层原理。

手写Promise全解析：从基础实现到Promises/A+测试通关

一、Promise核心机制解析

Promise作为现代JavaScript异步编程的核心，其设计遵循”状态机”理论。一个Promise对象必然处于以下三种状态之一：

  • Pending（待定）：初始状态，可迁移至Fulfilled或Rejected
  • Fulfilled（已兑现）：表示操作成功完成
  • Rejected（已拒绝）：表示操作失败

状态迁移具有不可逆性，这是实现Promise时必须严格遵守的规范。以文件读取操作为例，当fs.readFile成功完成时，Promise应进入Fulfilled状态并携带文件内容；若发生错误则进入Rejected状态并携带错误对象。

1.1 基础类结构实现

  1. class MyPromise {
  2.   constructor(executor) {
  3.     this.state = 'pending'; // 初始状态
  4.     this.value = undefined; // 成功值
  5.     this.reason = undefined; // 失败原因
  6.     this.onFulfilledCallbacks = []; // 成功回调队列
  7.     this.onRejectedCallbacks = []; // 失败回调队列
  9.     const resolve = (value) => {
  10.       if (this.state === 'pending') {
  11.         this.state = 'fulfilled';
  12.         this.value = value;
  13.         this.onFulfilledCallbacks.forEach(fn => fn());
  14.       }
  15.     };
  17.     const reject = (reason) => {
  18.       if (this.state === 'pending') {
  19.         this.state = 'rejected';
  20.         this.reason = reason;
  21.         this.onRejectedCallbacks.forEach(fn => fn());
  22.       }
  23.     };
  25.     try {
  26.       executor(resolve, reject);
  27.     } catch (err) {
  28.       reject(err);
  29.     }
  30.   }
  31. }

这个基础实现包含了Promise的核心机制：状态管理、异步回调队列和错误捕获。值得注意的是，resolve和reject函数必须进行状态检查，防止重复状态变更。

二、then方法实现与链式调用

then方法是Promise实现中最复杂的部分，需要处理三种关键场景：

  1. 立即返回新Promise：实现链式调用的基础
  2. 回调函数异步执行：符合规范要求的微任务特性
  3. 值穿透机制：处理非函数回调的情况

2.1 完整then方法实现

  1. then(onFulfilled, onRejected) {
  2.   // 参数默认值处理
  3.   onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  4.   onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };
  6.   const promise2 = new MyPromise((resolve, reject) => {
  7.     if (this.state === 'fulfilled') {
  8.       setTimeout(() => {
  9.         try {
  10.           const x = onFulfilled(this.value);
  11.           resolvePromise(promise2, x, resolve, reject);
  12.         } catch (e) {
  13.           reject(e);
  14.         }
  15.       }, 0);
  16.     } else if (this.state === 'rejected') {
  17.       setTimeout(() => {
  18.         try {
  19.           const x = onRejected(this.reason);
  20.           resolvePromise(promise2, x, resolve, reject);
  21.         } catch (e) {
  22.           reject(e);
  23.         }
  24.       }, 0);
  25.     } else if (this.state === 'pending') {
  26.       this.onFulfilledCallbacks.push(() => {
  27.         setTimeout(() => {
  28.           try {
  29.             const x = onFulfilled(this.value);
  30.             resolvePromise(promise2, x, resolve, reject);
  31.           } catch (e) {
  32.             reject(e);
  33.           }
  34.         }, 0);
  35.       });
  37.       this.onRejectedCallbacks.push(() => {
  38.         setTimeout(() => {
  39.           try {
  40.             const x = onRejected(this.reason);
  41.             resolvePromise(promise2, x, resolve, reject);
  42.           } catch (e) {
  43.             reject(e);
  44.           }
  45.         }, 0);
  46.       });
  47.     }
  48.   });
  50.   return promise2;
  51. }

2.2 关键辅助函数：resolvePromise

这个函数处理Promise链式调用中的值传递，需要遵循以下规则：

  1. 如果x是Promise实例，则等待其决议
  2. 如果x是对象或函数，尝试解析其then方法
  3. 否则直接resolve(x)
  1. function resolvePromise(promise2, x, resolve, reject) {
  2.   if (promise2 === x) {
  3.     return reject(new TypeError('Chaining cycle detected'));
  4.   }
  6.   let called = false;
  7.   if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
  8.     try {
  9.       const then = x.then;
  10.       if (typeof then === 'function') {
  11.         then.call(
  12.           x,
  13.           y => {
  14.             if (called) return;
  15.             called = true;
  16.             resolvePromise(promise2, y, resolve, reject);
  17.           },
  18.           r => {
  19.             if (called) return;
  20.             called = true;
  21.             reject(r);
  22.           }
  23.         );
  24.       } else {
  25.         resolve(x);
  26.       }
  27.     } catch (e) {
  28.       if (called) return;
  29.       called = true;
  30.       reject(e);
  31.     }
  32.   } else {
  33.     resolve(x);
  34.   }
  35. }

三、Promises/A+规范测试实现

Promises/A+测试套件包含288个测试用例，验证实现是否符合规范。测试环境搭建步骤如下：

3.1 测试环境配置

  1. 安装测试运行器：

    1. npm install promises-aplus-tests -D

  2. 创建适配器文件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. 3. 运行测试：
  3. ```bash
  4. npx promises-aplus-tests promise-adapter.js

3.2 关键测试点解析

测试套件主要验证以下方面：

  1. 状态变更：确保状态只能从pending变为fulfilled/rejected
  2. 回调执行：验证then方法在状态变更后正确执行回调
  3. 链式调用：测试Promise链的传递和值穿透
  4. 异常处理：验证同步和异步错误的捕获机制

典型测试用例示例：

  1. // 测试用例：then方法返回新Promise
  2. it('should return a new promise', (done) => {
  3.   const deferred = adapter.deferred();
  4.   const result = deferred.promise.then(() => {});
  6.   assert(result instanceof Promise, 'then should return a Promise');
  7.   deferred.resolve();
  8.   done();
  9. });

四、高级特性实现

4.1 静态方法实现

  1. // catch方法
  2. catch(onRejected) {
  3.   return this.then(null, onRejected);
  4. }
  6. // resolve静态方法
  7. static resolve(value) {
  8.   if (value instanceof MyPromise) {
  9.     return value;
  10.   }
  11.   return new MyPromise(resolve => resolve(value));
  12. }
  14. // reject静态方法
  15. static reject(reason) {
  16.   return new MyPromise((_, reject) => reject(reason));
  17. }
  19. // all方法
  20. static all(promises) {
  21.   return new MyPromise((resolve, reject) => {
  22.     const results = [];
  23.     let completed = 0;
  25.     if (promises.length === 0) {
  26.       resolve(results);
  27.       return;
  28.     }
  30.     promises.forEach((promise, index) => {
  31.       MyPromise.resolve(promise).then(
  32.         value => {
  33.           results[index] = value;
  34.           completed++;
  35.           if (completed === promises.length) {
  36.             resolve(results);
  37.           }
  38.         },
  39.         reject
  40.       );
  41.     });
  42.   });
  43. }

4.2 微任务调度优化

实际实现中，可以使用queueMicrotask或MutationObserver来模拟微任务队列：

  1. const microtaskQueue = [];
  2. let isFlushing = false;
  4. function flushMicrotasks() {
  5.   if (isFlushing) return;
  6.   isFlushing = true;
  7.   while (microtaskQueue.length) {
  8.     const callback = microtaskQueue.shift();
  9.     callback();
  10.   }
  11.   isFlushing = false;
  12. }
  14. // 替换setTimeout
  15. function scheduleMicrotask(callback) {
  16.   microtaskQueue.push(callback);
  17.   if (!isFlushing) {
  18.     Promise.resolve().then(flushMicrotasks);
  19.   }
  20. }

五、性能优化与最佳实践

  1. 内存管理：在状态变更后清空回调队列
  2. 错误边界：使用try-catch包裹所有同步操作
  3. 调试支持：添加Promise链跟踪信息
  4. 兼容性处理：处理thenable对象的特殊情况

优化后的resolve函数示例：

  1. const resolve = (value) => {
  2.   if (this.state !== 'pending') return;
  4.   // 处理thenable对象
  5.   if (value !== null && (typeof value === 'object' || typeof value === 'function')) {
  6.     try {
  7.       const then = value.then;
  8.       if (typeof then === 'function') {
  9.         then.call(value, resolve.bind(this), reject.bind(this));
  10.         return;
  11.       }
  12.     } catch (e) {
  13.       reject.call(this, e);
  14.       return;
  15.     }
  16.   }
  18.   this.state = 'fulfilled';
  19.   this.value = value;
  20.   // 清空回调队列节省内存
  21.   this.onFulfilledCallbacks = [];
  22.   scheduleMicrotask(() => this.onFulfilledCallbacks.forEach(fn => fn()));
  23. };

六、总结与进阶建议

实现符合Promises/A+规范的Promise需要深入理解：

  1. 状态机的不可逆性
  2. 异步执行的调度机制
  3. 链式调用的值传递规则
  4. 异常处理的边界条件

建议开发者：

  1. 优先理解规范文档，再着手实现
  2. 逐步实现功能，先保证基础then方法正确
  3. 使用测试套件验证实现
  4. 参考成熟实现（如promises-es6）学习优化技巧

完整实现代码约200行，通过测试套件验证后，可应用于生产环境中的简单场景。对于复杂需求，建议使用经过充分测试的库如Bluebird或Zoroaster。

相关文章推荐

发表评论

最热文章

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数
活动
咨询