logo

开发者热搜

从零实现Promise：手写核心逻辑与静态方法解析

作者：很菜不狗2025.09.19 12:47浏览量：0

简介：本文深入解析Promise核心机制，通过手写实现帮助开发者理解异步编程原理，重点实现Promise类、all方法及race方法，附带完整代码与测试用例。

从零实现Promise：手写核心逻辑与静态方法解析

Promise作为JavaScript异步编程的核心解决方案，其内部实现机制一直是前端开发者关注的重点。本文将通过手写实现的方式，深入解析Promise的核心逻辑，并重点实现all和race两个静态方法，帮助开发者建立完整的Promise知识体系。

一、Promise核心实现

1.1 基础类结构

一个完整的Promise实现需要包含以下核心要素：

  • 三种状态：pending、fulfilled、rejected
  • 状态变更的不可逆性
  • 值/原因的存储
  • 回调队列管理
  • 异步执行机制
  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. }

1.2 then方法实现

then方法是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. }

1.3 解析Promise决议过程

resolvePromise函数处理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. }

二、静态方法实现

2.1 Promise.all实现

all方法接收一个Promise可迭代对象，返回一个新Promise：

  • 所有输入Promise都成功时，返回按顺序包含结果的数组
  • 任意一个Promise失败时，立即返回失败的Promise
  1. static all(promises) {
  2.   return new MyPromise((resolve, reject) => {
  3.     const results = [];
  4.     let completed = 0;
  5.     const length = promises.length;
  7.     if (length === 0) {
  8.       resolve(results);
  9.       return;
  10.     }
  12.     promises.forEach((promise, index) => {
  13.       MyPromise.resolve(promise).then(
  14.         value => {
  15.           results[index] = value;
  16.           completed++;
  17.           if (completed === length) {
  18.             resolve(results);
  19.           }
  20.         },
  21.         reason => {
  22.           reject(reason);
  23.         }
  24.       );
  25.     });
  26.   });
  27. }

2.2 Promise.race实现

race方法返回第一个决议的Promise（无论成功或失败）：

  1. static race(promises) {
  2.   return new MyPromise((resolve, reject) => {
  3.     if (promises.length === 0) return;
  5.     promises.forEach(promise => {
  6.       MyPromise.resolve(promise).then(
  7.         value => resolve(value),
  8.         reason => reject(reason)
  9.       );
  10.     });
  11.   });
  12. }

三、完整实现与测试

3.1 完整代码整合

将上述实现整合为完整类：

  1. class MyPromise {
  2.   // ... 前文实现的constructor和then方法 ...
  4.   static resolve(value) {
  5.     if (value instanceof MyPromise) {
  6.       return value;
  7.     }
  8.     return new MyPromise(resolve => resolve(value));
  9.   }
  11.   static reject(reason) {
  12.     return new MyPromise((resolve, reject) => reject(reason));
  13.   }
  15.   static all(promises) {
  16.     // ... 前文all实现 ...
  17.   }
  19.   static race(promises) {
  20.     // ... 前文race实现 ...
  21.   }
  23.   catch(onRejected) {
  24.     return this.then(null, onRejected);
  25.   }
  27.   finally(onFinally) {
  28.     return this.then(
  29.       value => MyPromise.resolve(onFinally()).then(() => value),
  30.       reason => MyPromise.resolve(onFinally()).then(() => { throw reason; })
  31.     );
  32.   }
  33. }

3.2 测试用例示例

  1. // 测试all方法
  2. const promise1 = new MyPromise((resolve) => setTimeout(() => resolve(1), 100));
  3. const promise2 = new MyPromise((resolve) => setTimeout(() => resolve(2), 200));
  4. const promise3 = new MyPromise((resolve) => setTimeout(() => resolve(3), 300));
  6. MyPromise.all([promise1, promise2, promise3])
  7.   .then(values => console.log(values)); // [1, 2, 3]
  9. // 测试race方法
  10. const fastPromise = new MyPromise(resolve => setTimeout(() => resolve('fast'), 100));
  11. const slowPromise = new MyPromise(resolve => setTimeout(() => resolve('slow'), 500));
  13. MyPromise.race([fastPromise, slowPromise])
  14.   .then(value => console.log(value)); // 'fast'

四、实现要点总结

  1. 状态管理：必须确保状态只能从pending变为fulfilled或rejected，且不可逆
  2. 异步执行：使用setTimeout或微任务队列确保then回调异步执行
  3. 链式调用：通过返回新Promise实现then方法的链式调用
  4. 错误处理：在executor和then回调中都需要捕获异常
  5. 静态方法：all和race都需要处理空数组和异常情况

五、实际应用建议

  1. 调试技巧：在实现过程中添加console.log跟踪状态变化
  2. 边界测试：重点测试以下场景：
    • 空数组输入
    • 包含非Promise值的数组
    • 立即决议的Promise
    • 抛出异常的回调
  3. 性能优化：对于all方法，可以使用计数器优化完成判断
  4. 类型检查：添加参数类型检查增强鲁棒性

通过本文的手写实现，开发者可以深入理解Promise的工作原理，这不仅有助于解决实际开发中的问题，也为学习更高级的异步编程模式（如Async/Await）打下坚实基础。完整实现约200行代码，建议在实际项目中逐步扩展功能，如添加catch、finally等API。

相关文章推荐

发表评论

最热文章

关于作者

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