logo

开发者热搜

手写Promise：从原理到实现的深度解析

作者：问答酱2025.09.19 12:47浏览量：0

简介：本文通过手写Promise实现，详细解析其核心机制、状态管理、链式调用及异步处理，帮助开发者深入理解Promise工作原理，提升实际开发能力。

一、面试场景中的Promise手写要求

在前端开发面试中，”手写Promise”已成为高频考点。这一要求不仅考察候选人对JavaScript异步编程的理解深度，更验证其能否将理论转化为可运行的代码实现。从企业招聘角度看，这反映了现代前端开发对基础扎实、具备底层思维工程师的需求。

二、Promise核心机制解析

1. 状态机的三态模型

Promise规范定义了三种状态：

  • Pending：初始状态，可转换为Fulfilled或Rejected
  • Fulfilled：操作成功完成，状态不可逆
  • Rejected：操作失败，状态不可逆

这种设计遵循了”一次到位”原则，确保异步操作的确定性结果。状态转换必须通过resolve()或reject()方法触发，外部代码无法直接修改状态。

2. 微任务队列机制

Promise的回调执行采用微任务（Microtask）队列，优先级高于宏任务（Macrotask）。当调用then()注册回调时，回调会被推入微任务队列，在当前执行栈清空后立即执行。这种设计避免了回调地狱，同时保证了异步操作的顺序性。

三、手写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. 状态管理实现

  1. resolve = (value) => {
  2.   if (this.state === 'pending') {
  3.     this.state = 'fulfilled';
  4.     this.value = value;
  5.     // 执行所有成功回调
  6.     this.onFulfilledCallbacks.forEach(fn => fn());
  7.   }
  8. };
  10. reject = (reason) => {
  11.   if (this.state === 'pending') {
  12.     this.state = 'rejected';
  13.     this.reason = reason;
  14.     // 执行所有失败回调
  15.     this.onRejectedCallbacks.forEach(fn => fn());
  16.   }
  17. };

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

4. 链式调用关键：resolvePromise

  1. function resolvePromise(promise2, x, resolve, reject) {
  2.   if (promise2 === x) {
  3.     return reject(new TypeError('Chaining cycle detected for promise'));
  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. }

四、完整实现代码

  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.   }
  32.   then(onFulfilled, onRejected) {
  33.     onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  34.     onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };
  36.     const promise2 = new MyPromise((resolve, reject) => {
  37.       if (this.state === 'fulfilled') {
  38.         setTimeout(() => {
  39.           try {
  40.             const x = onFulfilled(this.value);
  41.             resolvePromise(promise2, x, resolve, reject);
  42.           } catch (e) {
  43.             reject(e);
  44.           }
  45.         }, 0);
  46.       } else if (this.state === 'rejected') {
  47.         setTimeout(() => {
  48.           try {
  49.             const x = onRejected(this.reason);
  50.             resolvePromise(promise2, x, resolve, reject);
  51.           } catch (e) {
  52.             reject(e);
  53.           }
  54.         }, 0);
  55.       } else if (this.state === 'pending') {
  56.         this.onFulfilledCallbacks.push(() => {
  57.           setTimeout(() => {
  58.             try {
  59.               const x = onFulfilled(this.value);
  60.               resolvePromise(promise2, x, resolve, reject);
  61.             } catch (e) {
  62.               reject(e);
  63.             }
  64.           }, 0);
  65.         });
  67.         this.onRejectedCallbacks.push(() => {
  68.           setTimeout(() => {
  69.             try {
  70.               const x = onRejected(this.reason);
  71.               resolvePromise(promise2, x, resolve, reject);
  72.             } catch (e) {
  73.               reject(e);
  74.             }
  75.           }, 0);
  76.         });
  77.       }
  78.     });
  80.     return promise2;
  81.   }
  82. }
  84. function resolvePromise(promise2, x, resolve, reject) {
  85.   if (promise2 === x) {
  86.     return reject(new TypeError('Chaining cycle detected for promise'));
  87.   }
  89.   let called = false;
  90.   if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
  91.     try {
  92.       const then = x.then;
  93.       if (typeof then === 'function') {
  94.         then.call(
  95.           x,
  96.           y => {
  97.             if (called) return;
  98.             called = true;
  99.             resolvePromise(promise2, y, resolve, reject);
  100.           },
  101.           r => {
  102.             if (called) return;
  103.             called = true;
  104.             reject(r);
  105.           }
  106.         );
  107.       } else {
  108.         resolve(x);
  109.       }
  110.     } catch (e) {
  111.       if (called) return;
  112.       called = true;
  113.       reject(e);
  114.     }
  115.   } else {
  116.     resolve(x);
  117.   }
  118. }

五、实际应用建议

  1. 调试技巧：在实现过程中，建议使用console.log跟踪状态变化和回调执行顺序，这有助于理解异步流程
  2. 测试用例设计：
    • 立即resolve/reject的测试
    • 延迟resolve/reject的测试
    • 链式调用的测试
    • 异常处理的测试
  3. 性能优化：在实际项目中，可以考虑使用queueMicrotask替代setTimeout实现更高效的微任务调度

六、进阶方向

  1. 实现catch、finally等附加方法
  2. 添加静态方法all、race、allSettled
  3. 支持异步生成器（Async Generator）集成
  4. 实现Promise的取消功能（Cancelable Promise）

通过手写Promise实现，开发者不仅能深入理解异步编程的核心机制，更能培养解决复杂问题的能力。这种底层思维在处理复杂异步场景、调试性能问题时具有不可替代的价值。建议开发者在掌握基础实现后，继续探索Promise的扩展应用，如与Async/Await的协同使用、在React/Vue中的状态管理等高级场景。

相关文章推荐

发表评论

最热文章

关于作者

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