logo

开发者热搜

从零开始：手写实现Promise核心机制解析

作者：c4t2025.09.19 12:47浏览量：3

简介：本文深入解析Promise核心机制，通过手写实现完整功能，涵盖状态管理、链式调用、异步处理等关键特性，帮助开发者理解其底层原理。

从零开始：手写实现Promise核心机制解析

Promise作为JavaScript异步编程的核心解决方案，其设计思想深刻影响了现代前端开发。本文将通过手写实现一个简化版Promise，深入解析其工作原理，帮助开发者理解状态管理、链式调用、异步处理等核心机制。

一、Promise基础架构设计

1.1 核心状态定义

Promise规范定义了三种状态：pending、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. }

状态机设计确保了Promise的确定性行为，这是链式调用和异常处理的基础。

1.2 执行器函数解析

执行器函数接收resolve和reject两个参数，这两个方法需要处理状态变更和回调执行：

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

异步执行要求通过try/catch包裹执行器，防止未捕获异常导致进程崩溃。

二、核心方法实现

2.1 then方法实现

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.       // 模拟异步执行
  9.       setTimeout(() => {
  10.         try {
  11.           const x = onFulfilled(this.value);
  12.           resolvePromise(promise2, x, resolve, reject);
  13.         } catch (e) {
  14.           reject(e);
  15.         }
  16.       }, 0);
  17.     } else if (this.state === REJECTED) {
  18.       setTimeout(() => {
  19.         try {
  20.           const x = onRejected(this.reason);
  21.           resolvePromise(promise2, x, resolve, reject);
  22.         } catch (e) {
  23.           reject(e);
  24.         }
  25.       }, 0);
  26.     } else if (this.state === PENDING) {
  27.       this.onFulfilledCallbacks.push(() => {
  28.         setTimeout(() => {
  29.           try {
  30.             const x = onFulfilled(this.value);
  31.             resolvePromise(promise2, x, resolve, reject);
  32.           } catch (e) {
  33.             reject(e);
  34.           }
  35.         }, 0);
  36.       });
  38.       this.onRejectedCallbacks.push(() => {
  39.         setTimeout(() => {
  40.           try {
  41.             const x = onRejected(this.reason);
  42.             resolvePromise(promise2, x, resolve, reject);
  43.           } catch (e) {
  44.             reject(e);
  45.           }
  46.         }, 0);
  47.       });
  48.     }
  49.   });
  51.   return promise2;
  52. }

通过返回新的Promise实例实现链式调用，使用setTimeout模拟微任务队列。

2.2 resolvePromise解析

处理thenable对象和Promise的递归解析是关键：

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

该实现遵循Promise/A+规范，处理了各种边界情况。

三、静态方法实现

3.1 resolve/reject方法

  1. static resolve(value) {
  2.   if (value instanceof MyPromise) {
  3.     return value;
  4.   }
  5.   return new MyPromise(resolve => resolve(value));
  6. }
  8. static reject(reason) {
  9.   return new MyPromise((resolve, reject) => reject(reason));
  10. }

3.2 all方法实现

  1. static all(promises) {
  2.   return new MyPromise((resolve, reject) => {
  3.     const results = [];
  4.     let count = 0;
  6.     if (promises.length === 0) {
  7.       resolve(results);
  8.     }
  10.     promises.forEach((promise, index) => {
  11.       MyPromise.resolve(promise).then(
  12.         value => {
  13.           results[index] = value;
  14.           count++;
  15.           if (count === promises.length) {
  16.             resolve(results);
  17.           }
  18.         },
  19.         reason => reject(reason)
  20.       );
  21.     });
  22.   });
  23. }

3.3 race方法实现

  1. static race(promises) {
  2.   return new MyPromise((resolve, reject) => {
  3.     promises.forEach(promise => {
  4.       MyPromise.resolve(promise).then(resolve, reject);
  5.     });
  6.   });
  7. }

四、实际应用与调试技巧

4.1 常见问题排查

  1. 状态不可变：确保状态只能从pending转为fulfilled/rejected一次
  2. 回调执行顺序：使用setTimeout模拟微任务队列
  3. 值穿透处理：then方法的可选参数处理

4.2 性能优化建议

  1. 使用数组存储回调而非多次push
  2. 对已决议的Promise立即执行回调
  3. 实现微任务队列（实际开发中可使用MutationObserver或MessageChannel）

4.3 测试用例设计

  1. // 基础测试
  2. const p = new MyPromise((resolve) => {
  3.   setTimeout(() => resolve(1), 100);
  4. });
  6. p.then(value => {
  7.   console.log(value); // 1
  8.   return value + 1;
  9. }).then(value => {
  10.   console.log(value); // 2
  11. });
  13. // 异常处理测试
  14. MyPromise.reject('error')
  15.   .catch(e => {
  16.     console.log(e); // 'error'
  17.     return 'recovered';
  18.   })
  19.   .then(v => console.log(v)); // 'recovered'

五、完整实现代码

  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 (e) {
  32.       reject(e);
  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.       if (this.state === FULFILLED) {
  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.       } else if (this.state === REJECTED) {
  51.         setTimeout(() => {
  52.           try {
  53.             const x = onRejected(this.reason);
  54.             resolvePromise(promise2, x, resolve, reject);
  55.           } catch (e) {
  56.             reject(e);
  57.           }
  58.         }, 0);
  59.       } else if (this.state === PENDING) {
  60.         this.onFulfilledCallbacks.push(() => {
  61.           setTimeout(() => {
  62.             try {
  63.               const x = onFulfilled(this.value);
  64.               resolvePromise(promise2, x, resolve, reject);
  65.             } catch (e) {
  66.               reject(e);
  67.             }
  68.           }, 0);
  69.         });
  71.         this.onRejectedCallbacks.push(() => {
  72.           setTimeout(() => {
  73.             try {
  74.               const x = onRejected(this.reason);
  75.               resolvePromise(promise2, x, resolve, reject);
  76.             } catch (e) {
  77.               reject(e);
  78.             }
  79.           }, 0);
  80.         });
  81.       }
  82.     });
  84.     return promise2;
  85.   }
  87.   catch(onRejected) {
  88.     return this.then(null, onRejected);
  89.   }
  91.   finally(callback) {
  92.     return this.then(
  93.       value => MyPromise.resolve(callback()).then(() => value),
  94.       reason => MyPromise.resolve(callback()).then(() => { throw reason; })
  95.     );
  96.   }
  98.   static resolve(value) {
  99.     if (value instanceof MyPromise) {
  100.       return value;
  101.     }
  102.     return new MyPromise(resolve => resolve(value));
  103.   }
  105.   static reject(reason) {
  106.     return new MyPromise((resolve, reject) => reject(reason));
  107.   }
  109.   static all(promises) {
  110.     return new MyPromise((resolve, reject) => {
  111.       const results = [];
  112.       let count = 0;
  114.       if (promises.length === 0) {
  115.         resolve(results);
  116.       }
  118.       promises.forEach((promise, index) => {
  119.         MyPromise.resolve(promise).then(
  120.           value => {
  121.             results[index] = value;
  122.             count++;
  123.             if (count === promises.length) {
  124.               resolve(results);
  125.             }
  126.           },
  127.           reason => reject(reason)
  128.         );
  129.       });
  130.     });
  131.   }
  133.   static race(promises) {
  134.     return new MyPromise((resolve, reject) => {
  135.       promises.forEach(promise => {
  136.         MyPromise.resolve(promise).then(resolve, reject);
  137.       });
  138.     });
  139.   }
  140. }
  142. function resolvePromise(promise2, x, resolve, reject) {
  143.   if (promise2 === x) {
  144.     return reject(new TypeError('Chaining cycle detected for promise'));
  145.   }
  147.   let called = false;
  149.   if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
  150.     try {
  151.       const then = x.then;
  152.       if (typeof then === 'function') {
  153.         then.call(
  154.           x,
  155.           y => {
  156.             if (called) return;
  157.             called = true;
  158.             resolvePromise(promise2, y, resolve, reject);
  159.           },
  160.           r => {
  161.             if (called) return;
  162.             called = true;
  163.             reject(r);
  164.           }
  165.         );
  166.       } else {
  167.         resolve(x);
  168.       }
  169.     } catch (e) {
  170.       if (called) return;
  171.       called = true;
  172.       reject(e);
  173.     }
  174.   } else {
  175.     resolve(x);
  176.   }
  177. }

总结

通过手写实现Promise，我们深入理解了其状态管理、链式调用和异步处理机制。关键实现要点包括：

  1. 严格的状态转换规则
  2. 回调队列的异步执行
  3. thenable对象的递归解析
  4. 静态方法的完整实现

这种实现虽然简化了部分细节（如真正的微任务调度），但完整遵循了Promise/A+规范的核心逻辑。开发者可以通过扩展这个基础实现，添加async/await支持、取消功能等高级特性，进一步加深对异步编程的理解。

相关文章推荐

发表评论

最热文章

关于作者

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