logo

开发者热搜

可能是目前最易理解的手写Promise：从原理到实现全解析

作者：谁偷走了我的奶酪2025.09.19 12:47浏览量：0

简介：本文通过分步拆解Promise核心机制，结合代码示例与状态转换图，用最直观的方式讲解如何手写一个符合A+规范的Promise。涵盖异步任务管理、链式调用、错误处理等关键功能，并提供可运行的完整实现代码。

可能是目前最易理解的手写Promise：从原理到实现全解析

一、为什么需要手写Promise？

在前端开发中，Promise已成为处理异步操作的标准方案。但多数开发者仅停留在then/catch的表面使用，对内部实现机制缺乏深入理解。手写Promise不仅能加深对异步编程的理解，更能帮助解决以下实际问题：

  1. 调试困难：当Promise链中出现意外行为时，理解实现原理能快速定位问题
  2. 性能优化：自定义实现可针对性优化特定场景的异步流程
  3. 框架开发：构建底层库时需要精确控制异步行为
  4. 面试考察：手写Promise是高级前端岗位的常见考察点

本文将通过最简化的实现路径，逐步构建一个符合Promise/A+规范的完整实现，确保每个步骤都有明确的解释。

二、Promise核心机制解析

1. 状态机模型

Promise本质是一个状态机，包含三种状态：

  • Pending（待定）：初始状态，可迁移到Fulfilled或Rejected
  • Fulfilled（已兑现）：表示操作成功完成
  • Rejected（已拒绝）：表示操作失败
  1. const PENDING = 'pending';
  2. const FULFILLED = 'fulfilled';
  3. const REJECTED = 'rejected';
  5. class MyPromise {
  6.   constructor(executor) {
  7.     this.state = PENDING;
  8.     this.value = undefined;
  9.     this.reason = undefined;
  10.     this.onFulfilledCallbacks = [];
  11.     this.onRejectedCallbacks = [];
  12.   }
  13. }

状态转换规则：

  1. 只能从Pending迁移到Fulfilled或Rejected
  2. 一旦状态改变，不可再次变更
  3. 状态变更必须通过resolve或reject方法触发

2. 异步任务队列

Promise通过维护两个回调队列实现异步处理：

  1. resolve = (value) => {
  2.   if (this.state === PENDING) {
  3.     this.state = FULFILLED;
  4.     this.value = value;
  5.     this.onFulfilledCallbacks.forEach(fn => fn());
  6.   }
  7. };
  9. reject = (reason) => {
  10.   if (this.state === PENDING) {
  11.     this.state = REJECTED;
  12.     this.reason = reason;
  13.     this.onRejectedCallbacks.forEach(fn => fn());
  14.   }
  15. };

这种设计确保了：

  • 同步执行的executor函数可以立即触发状态变更
  • 异步执行的executor会将回调推入队列，在微任务中执行

三、分步实现完整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.       // 实现待补充
  11.     };
  13.     const reject = (reason) => {
  14.       // 实现待补充
  15.     };
  17.     try {
  18.       executor(resolve, reject);
  19.     } catch (err) {
  20.       reject(err);
  21.     }
  22.   }
  23. }

2. 实现then方法

then方法是Promise的核心，需要处理：

  • 立即返回新Promise实现链式调用
  • 执行时机控制（微任务）
  • 值穿透机制
  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. }

3. 解析Promise链（resolvePromise）

这是实现Promise规范最关键的部分，需要处理：

  • 循环引用检测
  • thenable对象处理
  • 异常捕获
  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. }

四、完整实现代码

  1. const PENDING = 'pending';
  2. const FULFILLED = 'fulfilled';
  3. const REJECTED = 'rejected';
  5. class MyPromise {
  6.   constructor(executor) {
  7.     this.state = PENDING;
  8.     this.value = undefined;
  9.     this.reason = undefined;
  10.     this.onFulfilledCallbacks = [];
  11.     this.onRejectedCallbacks = [];
  13.     const resolve = (value) => {
  14.       if (this.state === PENDING) {
  15.         this.state = FULFILLED;
  16.         this.value = value;
  17.         this.onFulfilledCallbacks.forEach(fn => fn());
  18.       }
  19.     };
  21.     const reject = (reason) => {
  22.       if (this.state === PENDING) {
  23.         this.state = REJECTED;
  24.         this.reason = reason;
  25.         this.onRejectedCallbacks.forEach(fn => fn());
  26.       }
  27.     };
  29.     try {
  30.       executor(resolve, reject);
  31.     } catch (err) {
  32.       reject(err);
  33.     }
  34.   }
  36.   then(onFulfilled, onRejected) {
  37.     onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  38.     onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };
  40.     const promise2 = new MyPromise((resolve, reject) => {
  41.       const handleFulfilled = () => {
  42.         setTimeout(() => {
  43.           try {
  44.             const x = onFulfilled(this.value);
  45.             resolvePromise(promise2, x, resolve, reject);
  46.           } catch (e) {
  47.             reject(e);
  48.           }
  49.         }, 0);
  50.       };
  52.       const handleRejected = () => {
  53.         setTimeout(() => {
  54.           try {
  55.             const x = onRejected(this.reason);
  56.             resolvePromise(promise2, x, resolve, reject);
  57.           } catch (e) {
  58.             reject(e);
  59.           }
  60.         }, 0);
  61.       };
  63.       if (this.state === FULFILLED) {
  64.         handleFulfilled();
  65.       } else if (this.state === REJECTED) {
  66.         handleRejected();
  67.       } else if (this.state === PENDING) {
  68.         this.onFulfilledCallbacks.push(handleFulfilled);
  69.         this.onRejectedCallbacks.push(handleRejected);
  70.       }
  71.     });
  73.     return promise2;
  74.   }
  76.   // 添加catch方法增强实用性
  77.   catch(onRejected) {
  78.     return this.then(null, onRejected);
  79.   }
  81.   // 添加静态resolve方法
  82.   static resolve(value) {
  83.     if (value instanceof MyPromise) {
  84.       return value;
  85.     }
  86.     return new MyPromise(resolve => resolve(value));
  87.   }
  88. }
  90. function resolvePromise(promise2, x, resolve, reject) {
  91.   if (promise2 === x) {
  92.     return reject(new TypeError('Chaining cycle detected for promise'));
  93.   }
  94.   let called = false;
  95.   if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
  96.     try {
  97.       const then = x.then;
  98.       if (typeof then === 'function') {
  99.         then.call(
  100.           x,
  101.           y => {
  102.             if (called) return;
  103.             called = true;
  104.             resolvePromise(promise2, y, resolve, reject);
  105.           },
  106.           r => {
  107.             if (called) return;
  108.             called = true;
  109.             reject(r);
  110.           }
  111.         );
  112.       } else {
  113.         resolve(x);
  114.       }
  115.     } catch (e) {
  116.       if (called) return;
  117.       called = true;
  118.       reject(e);
  119.     }
  120.   } else {
  121.     resolve(x);
  122.   }
  123. }

五、实用建议与扩展

  1. 测试验证：使用Promises/A+测试套件验证实现正确性

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

  2. 性能优化：

    • 使用queueMicrotask替代setTimeout实现更精确的微任务调度
    • 对频繁创建的Promise进行对象池管理

  3. 扩展功能：

    • 实现finally方法
    • 添加all、race等静态方法
    • 支持取消Promise的机制

  4. 调试技巧：

    • 在状态变更时添加日志
    • 实现inspect方法便于调试

六、总结

通过分步实现，我们构建了一个符合Promise/A+规范的完整实现。关键点包括：

  1. 严格的三态管理机制
  2. 异步回调队列的实现
  3. 链式调用的值穿透处理
  4. thenable对象的解析规则

这种实现方式不仅加深了对Promise原理的理解，更为自定义异步控制提供了基础。实际开发中，可根据具体需求在此基础上进行扩展优化，构建更符合业务场景的异步解决方案。

相关文章推荐

发表评论

最热文章

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数