logo

开发者热搜

从零手写Promise：深入解析Promise/A+规范实现原理

作者：半吊子全栈工匠2025.09.19 12:47浏览量：2

简介：本文详细解析Promise/A+规范的核心要点，通过分步骤实现手写Promise，帮助开发者理解异步编程的核心机制，并提供可运行的代码示例和关键测试用例。

从零手写Promise：深入解析Promise/A+规范实现原理

一、Promise/A+规范核心要点解析

Promise/A+规范作为异步编程的事实标准，其核心设计包含三个关键要素：状态机机制、链式调用能力和错误传播机制。规范明确规定了Promise必须经历Pending→Fulfilled/Rejected的不可逆状态转换，这种设计避免了Zalgo问题（同步/异步行为不一致）。

在链式调用方面，规范要求.then()方法必须返回新的Promise，形成可追踪的异步链条。这种设计模式解耦了生产者和消费者，使得异步操作可以像同步代码一样组织。错误传播机制则通过”失败冒泡”特性，将未处理的拒绝状态沿链向上传递，直到被.catch()捕获。

规范测试用例覆盖了28个核心场景，包括：

  • 状态变更的不可逆性验证
  • 多次调用.then()的回调收集机制
  • 嵌套Promise的展开规则
  • 异步通知的时序保证

二、手写Promise基础结构实现

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方法
  • 通过状态检查确保不可逆变更
  • 维护回调队列实现异步通知

2. 基础链式调用实现

  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. }

关键实现细节：

  • 使用setTimeout实现异步调度（符合规范要求的微任务模拟）
  • 参数类型校验与默认处理
  • 回调队列管理
  • 错误边界处理

三、Promise解析过程深度实现

1. resolvePromise核心逻辑

  1. function resolvePromise(promise2, x, resolve, reject) {
  2.   // 循环引用检查
  3.   if (promise2 === x) {
  4.     return reject(new TypeError('Chaining cycle detected for promise'));
  5.   }
  7.   // 防止多次调用
  8.   let called = false;
  10.   if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
  11.     try {
  12.       const then = x.then;
  13.       if (typeof then === 'function') {
  14.         then.call(
  15.           x,
  16.           y => {
  17.             if (called) return;
  18.             called = true;
  19.             resolvePromise(promise2, y, resolve, reject);
  20.           },
  21.           r => {
  22.             if (called) return;
  23.             called = true;
  24.             reject(r);
  25.           }
  26.         );
  27.       } else {
  28.         resolve(x);
  29.       }
  30.     } catch (e) {
  31.       if (called) return;
  32.       called = true;
  33.       reject(e);
  34.     }
  35.   } else {
  36.     resolve(x);
  37.   }
  38. }

这个实现覆盖了规范要求的所有边界情况：

  • 循环引用检测：防止Promise自我引用导致的无限递归
  • Thenable对象处理：兼容非Promise的thenable对象
  • 调用保护：确保resolve/reject只执行一次
  • 异常捕获：处理then方法执行时的错误

2. 静态方法实现

  1. // 实现Promise.resolve
  2. static resolve(value) {
  3.   if (value instanceof MyPromise) {
  4.     return value;
  5.   }
  6.   return new MyPromise(resolve => resolve(value));
  7. }
  9. // 实现Promise.reject
  10. static reject(reason) {
  11.   return new MyPromise((_, reject) => reject(reason));
  12. }
  14. // 实现Promise.all
  15. static all(promises) {
  16.   return new MyPromise((resolve, reject) => {
  17.     const results = [];
  18.     let count = 0;
  20.     if (promises.length === 0) {
  21.       resolve(results);
  22.     }
  24.     promises.forEach((promise, index) => {
  25.       MyPromise.resolve(promise).then(
  26.         value => {
  27.           results[index] = value;
  28.           count++;
  29.           if (count === promises.length) {
  30.             resolve(results);
  31.           }
  32.         },
  33.         reason => reject(reason)
  34.       );
  35.     });
  36.   });
  37. }

四、规范测试与调试技巧

1. 测试用例设计要点

  1. 状态变更测试：

    1. test('should transition from pending to fulfilled', () => {
    2. let resolved = false;
    3. new MyPromise(resolve => resolve()).then(() => {
    4.  resolved = true;
    5. });
    6. return delay(10).then(() => {
    7.  expect(resolved).toBe(true);
    8. });
    9. });

  2. 链式调用测试：

    1. test('should chain promises correctly', () => {
    2. const result = [];
    3. return MyPromise.resolve(1)
    4.  .then(x => {
    5.    result.push(x);
    6.    return x + 1;
    7.  })
    8.  .then(x => {
    9.    result.push(x);
    10.    return new MyPromise(resolve => resolve(x + 1));
    11.  })
    12.  .then(x => {
    13.    result.push(x);
    14.    return result;
    15.  })
    16.  .then(res => {
    17.    expect(res).toEqual([1, 2, 3]);
    18.  });
    19. });

  3. 错误传播测试：

    1. test('should propagate rejection', () => {
    2. const error = new Error('test');
    3. return MyPromise.reject(error)
    4.  .then(() => {})
    5.  .catch(err => {
    6.    expect(err).toBe(error);
    7.  });
    8. });

2. 调试常见问题

  1. 同步执行问题：
  • 错误表现：回调被同步执行
  • 解决方案：确保使用setTimeout或queueMicrotask实现异步调度
  1. 状态重复变更：
  • 错误表现：多次调用resolve/reject
  • 解决方案：在构造函数中添加状态检查
  1. Thenable对象处理不当：
  • 错误表现：非Promise的thenable对象未正确展开
  • 解决方案：实现完整的resolvePromise逻辑

五、性能优化与工程实践

1. 微任务调度优化

  1. // 使用MutationObserver实现微任务（现代浏览器）
  2. const microtaskQueue = [];
  3. let isFlushing = false;
  5. function flushMicrotasks() {
  6.   if (isFlushing) return;
  7.   isFlushing = true;
  8.   while (microtaskQueue.length) {
  9.     const callback = microtaskQueue.shift();
  10.     callback();
  11.   }
  12.   isFlushing = false;
  13. }
  15. const observer = new MutationObserver(flushMicrotasks);
  16. const node = document.createTextNode('');
  17. observer.observe(node, { characterData: true });
  19. function queueMicrotask(callback) {
  20.   microtaskQueue.push(callback);
  21.   node.data = Math.random();
  22. }

2. 内存管理优化

  • 弱引用管理：使用WeakMap存储临时数据
  • 回调清理：在状态变更后清空回调队列
  • 对象复用：实现Promise池减少内存分配

3. 类型安全增强

  1. // TypeScript类型定义示例
  2. interface Thenable<T> {
  3.   then<U>(
  4.     onFulfilled?: (value: T) => U | Thenable<U>,
  5.     onRejected?: (reason: any) => U | Thenable<U>
  6.   ): Thenable<U>;
  7. }
  9. class TypedPromise<T> implements Thenable<T> {
  10.   // 实现代码...
  11. }

六、完整实现示例与使用指南

1. 完整类实现

  1. class MyPromise {
  2.   // 前文所有代码整合...
  4.   // 添加catch方法
  5.   catch(onRejected) {
  6.     return this.then(null, onRejected);
  7.   }
  9.   // 添加finally方法
  10.   finally(callback) {
  11.     return this.then(
  12.       value => MyPromise.resolve(callback()).then(() => value),
  13.       reason => MyPromise.resolve(callback()).then(() => { throw reason; })
  14.     );
  15.   }
  16. }

2. 使用示例

  1. // 基本用法
  2. new MyPromise((resolve) => {
  3.   setTimeout(() => resolve('成功'), 1000);
  4. }).then(console.log); // 1秒后输出"成功"
  6. // 链式调用
  7. MyPromise.resolve(1)
  8.   .then(x => x + 1)
  9.   .then(x => new MyPromise(resolve => resolve(x * 2)))
  10.   .then(console.log); // 输出4
  12. // 错误处理
  13. new MyPromise((_, reject) => reject('错误'))
  14.   .catch(err => console.log('捕获:', err)); // 输出"捕获: 错误"

3. 规范兼容性验证

使用promises-aplus-tests进行验证：

  1. npm install promises-aplus-tests -g
  2. promises-aplus-tests your-promise-implementation.js

七、进阶主题与扩展思考

  1. 取消机制实现：
  • 添加AbortController集成
  • 实现可取消的Promise链
  1. 进度通知：
  • 扩展.then()支持进度回调
  • 实现观察者模式通知
  1. 并发控制：
  • 实现类似p-limit的并发管理器
  • 添加并发数限制参数
  1. 与Async/Await集成：
  • 确保生成器函数能正确处理自定义Promise
  • 验证async函数中的错误传播

通过完整实现Promise/A+规范，开发者不仅能深入理解异步编程的核心机制，还能获得以下收益：

  1. 提升调试复杂异步流的能力
  2. 理解现代前端框架的异步调度原理
  3. 具备实现自定义异步原语的能力
  4. 增强对TypeScript类型系统的掌握

建议开发者在实现过程中：

  1. 严格按照规范测试用例验证
  2. 逐步添加功能，每次只实现一个特性
  3. 编写详细的单元测试
  4. 对比原生Promise的行为差异

这种实践不仅能巩固JavaScript基础知识，更能培养解决复杂系统问题的能力，为理解更高级的异步模式（如RxJS、Async Generator）打下坚实基础。

相关文章推荐

发表评论

最热文章

关于作者

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