logo

开发者热搜

从零到一：手写Promise全流程解析与实现

作者：渣渣辉2025.09.19 12:47浏览量：0

简介：本文详细解析如何从0开始手写一个Promise，涵盖状态管理、链式调用、异常处理等核心机制，适合想要深入理解Promise原理的开发者。

从零到一：手写Promise全流程解析与实现

1. 引言：为什么需要手写Promise？

Promise是JavaScript异步编程的核心，但原生Promise的实现隐藏了诸多细节。手写Promise不仅能帮助开发者深入理解其工作原理，还能在以下场景中发挥作用：

  • 面试中考察对异步编程的理解
  • 定制化Promise行为（如添加日志、超时控制）
  • 在无原生Promise的环境中（如旧浏览器）实现兼容
  • 教学目的，帮助他人理解Promise机制

2. Promise核心概念回顾

在开始实现前，我们需要明确Promise的几个核心特性：

  • 三种状态：pending（待定）、fulfilled（已兑现）、rejected（已拒绝）
  • 状态不可逆：一旦从pending变为fulfilled或rejected，就不能再改变
  • then方法：支持链式调用，接收onFulfilled和onRejected两个回调
  • 异步执行：resolve/reject的回调会被放入微任务队列

3. 基础结构搭建

3.1 构造函数实现

  1. class MyPromise {
  2.   constructor(executor) {
  3.     // 初始化状态和结果
  4.     this.state = 'pending'; // pending, fulfilled, rejected
  5.     this.result = undefined;
  7.     // 存储回调队列（用于then的链式调用）
  8.     this.onFulfilledCallbacks = [];
  9.     this.onRejectedCallbacks = [];
  11.     // resolve函数
  12.     const resolve = (value) => {
  13.       if (this.state === 'pending') {
  14.         this.state = 'fulfilled';
  15.         this.result = value;
  16.         // 执行所有成功的回调
  17.         this.onFulfilledCallbacks.forEach(fn => fn());
  18.       }
  19.     };
  21.     // reject函数
  22.     const reject = (reason) => {
  23.       if (this.state === 'pending') {
  24.         this.state = 'rejected';
  25.         this.result = reason;
  26.         // 执行所有失败的回调
  27.         this.onRejectedCallbacks.forEach(fn => fn());
  28.       }
  29.     };
  31.     // 执行executor，捕获可能的异常
  32.     try {
  33.       executor(resolve, reject);
  34.     } catch (err) {
  35.       reject(err);
  36.     }
  37.   }
  38. }

3.2 关键点解析

  1. 状态管理：使用state变量严格跟踪Promise状态
  2. 回调队列：存储then方法注册的回调，在状态变更时执行
  3. 异常处理：在executor执行时捕获同步错误

4. then方法实现

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

  • 异步执行回调
  • 链式调用（返回新的Promise）
  • 值穿透（如果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.     // 根据当前状态决定如何处理
  8.     if (this.state === 'fulfilled') {
  9.       // 使用setTimeout模拟微任务（实际浏览器中使用queueMicrotask）
  10.       setTimeout(() => {
  11.         try {
  12.           const x = onFulfilled(this.result);
  13.           resolvePromise(promise2, x, resolve, reject);
  14.         } catch (err) {
  15.           reject(err);
  16.         }
  17.       }, 0);
  18.     } else if (this.state === 'rejected') {
  19.       setTimeout(() => {
  20.         try {
  21.           const x = onRejected(this.result);
  22.           resolvePromise(promise2, x, resolve, reject);
  23.         } catch (err) {
  24.           reject(err);
  25.         }
  26.       }, 0);
  27.     } else if (this.state === 'pending') {
  28.       // 如果是pending状态，将回调存入队列
  29.       this.onFulfilledCallbacks.push(() => {
  30.         setTimeout(() => {
  31.           try {
  32.             const x = onFulfilled(this.result);
  33.             resolvePromise(promise2, x, resolve, reject);
  34.           } catch (err) {
  35.             reject(err);
  36.           }
  37.         }, 0);
  38.       });
  40.       this.onRejectedCallbacks.push(() => {
  41.         setTimeout(() => {
  42.           try {
  43.             const x = onRejected(this.result);
  44.             resolvePromise(promise2, x, resolve, reject);
  45.           } catch (err) {
  46.             reject(err);
  47.           }
  48.         }, 0);
  49.       });
  50.     }
  51.   });
  53.   return promise2;
  54. }

5. resolvePromise：处理链式调用的核心

这是Promise实现中最复杂的部分，需要处理：

  • 返回值是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.   // 防止多次调用
  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.         // x是一个Promise（或类Promise对象）
  15.         then.call(
  16.           x,
  17.           y => {
  18.             if (called) return;
  19.             called = true;
  20.             resolvePromise(promise2, y, resolve, reject);
  21.           },
  22.           r => {
  23.             if (called) return;
  24.             called = true;
  25.             reject(r);
  26.           }
  27.         );
  28.       } else {
  29.         // x是一个普通对象
  30.         resolve(x);
  31.       }
  32.     } catch (err) {
  33.       if (called) return;
  34.       called = true;
  35.       reject(err);
  36.     }
  37.   } else {
  38.     // x是普通值
  39.     resolve(x);
  40.   }
  41. }

6. 静态方法实现

6.1 Promise.resolve

  1. static resolve(value) {
  2.   if (value instanceof MyPromise) {
  3.     return value;
  4.   }
  5.   return new MyPromise(resolve => resolve(value));
  6. }

6.2 Promise.reject

  1. static reject(reason) {
  2.   return new MyPromise((_, reject) => reject(reason));
  3. }

6.3 Promise.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.       return;
  9.     }
  11.     promises.forEach((promise, index) => {
  12.       MyPromise.resolve(promise).then(
  13.         value => {
  14.           results[index] = value;
  15.           count++;
  16.           if (count === promises.length) {
  17.             resolve(results);
  18.           }
  19.         },
  20.         reason => {
  21.           reject(reason);
  22.         }
  23.       );
  24.     });
  25.   });
  26. }

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

7. 微任务队列的模拟实现

浏览器中使用queueMicrotask，Node.js中使用process.nextTick。这里我们简单模拟：

  1. // 在MyPromise类中添加
  2. static _microtaskQueue = [];
  3. static _isFlushing = false;
  5. static _flush() {
  6.   if (this._isFlushing) return;
  7.   this._isFlushing = true;
  8.   while (this._microtaskQueue.length) {
  9.     const callback = this._microtaskQueue.shift();
  10.     callback();
  11.   }
  12.   this._isFlushing = false;
  13. }
  15. static queueMicrotask(callback) {
  16.   this._microtaskQueue.push(callback);
  17.   if (!this._isFlushing) {
  18.     setTimeout(this._flush.bind(this), 0);
  19.   }
  20. }

然后在then方法中使用：

  1. // 替换之前的setTimeout
  2. MyPromise.queueMicrotask(() => {
  3.   try {
  4.     const x = onFulfilled(this.result);
  5.     resolvePromise(promise2, x, resolve, reject);
  6.   } catch (err) {
  7.     reject(err);
  8.   }
  9. });

8. 完整实现代码

将以上所有部分组合起来，我们得到一个完整的Promise实现：

  1. class MyPromise {
  2.   static _microtaskQueue = [];
  3.   static _isFlushing = false;
  5.   static _flush() {
  6.     if (this._isFlushing) return;
  7.     this._isFlushing = true;
  8.     while (this._microtaskQueue.length) {
  9.       const callback = this._microtaskQueue.shift();
  10.       callback();
  11.     }
  12.     this._isFlushing = false;
  13.   }
  15.   static queueMicrotask(callback) {
  16.     this._microtaskQueue.push(callback);
  17.     if (!this._isFlushing) {
  18.       setTimeout(this._flush.bind(this), 0);
  19.     }
  20.   }
  22.   static resolve(value) {
  23.     if (value instanceof MyPromise) {
  24.       return value;
  25.     }
  26.     return new MyPromise(resolve => resolve(value));
  27.   }
  29.   static reject(reason) {
  30.     return new MyPromise((_, reject) => reject(reason));
  31.   }
  33.   static all(promises) {
  34.     return new MyPromise((resolve, reject) => {
  35.       const results = [];
  36.       let count = 0;
  38.       if (promises.length === 0) {
  39.         resolve(results);
  40.         return;
  41.       }
  43.       promises.forEach((promise, index) => {
  44.         MyPromise.resolve(promise).then(
  45.           value => {
  46.             results[index] = value;
  47.             count++;
  48.             if (count === promises.length) {
  49.               resolve(results);
  50.             }
  51.           },
  52.           reason => {
  53.             reject(reason);
  54.           }
  55.         );
  56.       });
  57.     });
  58.   }
  60.   static race(promises) {
  61.     return new MyPromise((resolve, reject) => {
  62.       promises.forEach(promise => {
  63.         MyPromise.resolve(promise).then(resolve, reject);
  64.       });
  65.     });
  66.   }
  68.   constructor(executor) {
  69.     this.state = 'pending';
  70.     this.result = undefined;
  71.     this.onFulfilledCallbacks = [];
  72.     this.onRejectedCallbacks = [];
  74.     const resolve = (value) => {
  75.       if (this.state === 'pending') {
  76.         this.state = 'fulfilled';
  77.         this.result = value;
  78.         this.onFulfilledCallbacks.forEach(fn => fn());
  79.       }
  80.     };
  82.     const reject = (reason) => {
  83.       if (this.state === 'pending') {
  84.         this.state = 'rejected';
  85.         this.result = reason;
  86.         this.onRejectedCallbacks.forEach(fn => fn());
  87.       }
  88.     };
  90.     try {
  91.       executor(resolve, reject);
  92.     } catch (err) {
  93.       reject(err);
  94.     }
  95.   }
  97.   then(onFulfilled, onRejected) {
  98.     onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  99.     onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };
  101.     const promise2 = new MyPromise((resolve, reject) => {
  102.       const handleFulfilled = () => {
  103.         MyPromise.queueMicrotask(() => {
  104.           try {
  105.             const x = onFulfilled(this.result);
  106.             resolvePromise(promise2, x, resolve, reject);
  107.           } catch (err) {
  108.             reject(err);
  109.           }
  110.         });
  111.       };
  113.       const handleRejected = () => {
  114.         MyPromise.queueMicrotask(() => {
  115.           try {
  116.             const x = onRejected(this.result);
  117.             resolvePromise(promise2, x, resolve, reject);
  118.           } catch (err) {
  119.             reject(err);
  120.           }
  121.         });
  122.       };
  124.       if (this.state === 'fulfilled') {
  125.         handleFulfilled();
  126.       } else if (this.state === 'rejected') {
  127.         handleRejected();
  128.       } else if (this.state === 'pending') {
  129.         this.onFulfilledCallbacks.push(handleFulfilled);
  130.         this.onRejectedCallbacks.push(handleRejected);
  131.       }
  132.     });
  134.     return promise2;
  135.   }
  137.   catch(onRejected) {
  138.     return this.then(null, onRejected);
  139.   }
  141.   finally(callback) {
  142.     return this.then(
  143.       value => MyPromise.resolve(callback()).then(() => value),
  144.       reason => MyPromise.resolve(callback()).then(() => { throw reason; })
  145.     );
  146.   }
  147. }
  149. function resolvePromise(promise2, x, resolve, reject) {
  150.   if (promise2 === x) {
  151.     return reject(new TypeError('Chaining cycle detected for promise'));
  152.   }
  154.   let called = false;
  156.   if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
  157.     try {
  158.       const then = x.then;
  159.       if (typeof then === 'function') {
  160.         then.call(
  161.           x,
  162.           y => {
  163.             if (called) return;
  164.             called = true;
  165.             resolvePromise(promise2, y, resolve, reject);
  166.           },
  167.           r => {
  168.             if (called) return;
  169.             called = true;
  170.             reject(r);
  171.           }
  172.         );
  173.       } else {
  174.         resolve(x);
  175.       }
  176.     } catch (err) {
  177.       if (called) return;
  178.       called = true;
  179.       reject(err);
  180.     }
  181.   } else {
  182.     resolve(x);
  183.   }
  184. }

9. 测试用例

  1. // 测试1：基本用法
  2. const promise = new MyPromise((resolve, reject) => {
  3.   setTimeout(() => resolve('成功'), 1000);
  4. });
  6. promise.then(
  7.   value => console.log(value), // 应该输出"成功"
  8.   reason => console.error(reason)
  9. );
  11. // 测试2：链式调用
  12. MyPromise.resolve(1)
  13.   .then(x => x + 1)
  14.   .then(x => x * 2)
  15.   .then(x => console.log(x)); // 应该输出4
  17. // 测试3：Promise.all
  18. const p1 = MyPromise.resolve(1);
  19. const p2 = MyPromise.resolve(2);
  20. const p3 = MyPromise.resolve(3);
  22. MyPromise.all([p1, p2, p3]).then(values => {
  23.   console.log(values); // 应该输出[1, 2, 3]
  24. });
  26. // 测试4：异常处理
  27. new MyPromise((_, reject) => reject('错误'))
  28.   .catch(err => console.error(err)); // 应该输出"错误"

10. 总结与扩展

通过手写Promise，我们深入理解了以下核心概念：

  1. 状态管理：Promise的三种状态及其转换规则
  2. 异步执行：微任务队列的实现机制
  3. 链式调用：then方法的返回值处理
  4. 异常处理：同步和异步错误的捕获

10.1 进一步优化方向

  1. 性能优化：减少微任务队列的开销
  2. 兼容性增强：支持更老的浏览器环境
  3. 功能扩展：添加finally、allSettled等方法
  4. 调试支持：添加堆栈跟踪功能

10.2 实际应用建议

  1. 在学习阶段，可以对比原生Promise的实现差异
  2. 在生产环境中，除非有特殊需求，否则建议使用原生Promise
  3. 可以通过扩展MyPromise类来添加自定义功能

手写Promise不仅是一次技术挑战，更是对JavaScript异步编程模式的深度理解。通过这个过程，开发者能够更好地掌握Promise的工作原理，从而写出更健壮、更高效的异步代码。

相关文章推荐

发表评论

最热文章

关于作者

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