logo

开发者热搜

从零实现Promise：深度解析all与race核心机制

作者：问题终结者2025.09.19 12:47浏览量：0

简介：本文通过手写实现Promise类及其all、race方法，深入解析异步编程核心机制，包含状态管理、链式调用、并发控制等关键点的代码实现与原理剖析。

深度解析Promise核心机制与实现

一、Promise基础实现原理

1.1 状态机设计

Promise的核心是状态管理系统，包含三种状态：

  • Pending（初始态）
  • Fulfilled（成功态）
  • Rejected（失败态）

状态转换规则：

  1. 只能从Pending转为Fulfilled或Rejected
  2. 状态一旦改变不可逆
  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方法的核心是返回新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 异步执行机制

使用setTimeout将回调推入宏任务队列，保证：

  1. 同步代码优先执行
  2. 回调按注册顺序执行
  3. 符合Promise/A+规范的执行时序

二、Promise.all实现解析

2.1 核心功能

接收Promise数组，返回新Promise：

  • 所有输入Promise成功时，返回结果数组
  • 任意Promise失败时，立即返回失败原因

2.2 实现代码

  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.       // 处理非Promise值
  13.       MyPromise.resolve(promise).then(
  14.         value => {
  15.           results[index] = value;
  16.           count++;
  17.           if (count === promises.length) {
  18.             resolve(results);
  19.           }
  20.         },
  21.         reason => {
  22.           reject(reason);
  23.         }
  24.       );
  25.     });
  26.   });
  27. }

2.3 关键点解析

  1. 结果数组顺序保持与输入一致
  2. 使用MyPromise.resolve处理非Promise值
  3. 计数器机制确保所有Promise完成
  4. 遇到第一个错误立即终止

三、Promise.race实现解析

3.1 核心功能

接收Promise数组，返回新Promise：

  • 第一个完成（成功/失败）的Promise决定结果
  • 后续Promise结果被忽略

3.2 实现代码

  1. static race(promises) {
  2.   return new MyPromise((resolve, reject) => {
  3.     if (promises.length === 0) {
  4.       return; // 空数组不改变状态
  5.     }
  7.     promises.forEach(promise => {
  8.       MyPromise.resolve(promise).then(
  9.         value => {
  10.           resolve(value);
  11.         },
  12.         reason => {
  13.           reject(reason);
  14.         }
  15.       );
  16.     });
  17.   });
  18. }

3.3 关键点解析

  1. 立即响应第一个完成的结果
  2. 使用MyPromise.resolve确保值处理
  3. 空数组处理与all方法保持一致
  4. 竞速机制实现

四、完整实现与测试

4.1 完整代码

  1. class MyPromise {
  2.   // ...前文所有代码...
  4.   static resolve(value) {
  5.     if (value instanceof MyPromise) {
  6.       return value;
  7.     }
  8.     return new MyPromise(resolve => resolve(value));
  9.   }
  11.   catch(onRejected) {
  12.     return this.then(null, onRejected);
  13.   }
  15.   finally(callback) {
  16.     return this.then(
  17.       value => MyPromise.resolve(callback()).then(() => value),
  18.       reason => MyPromise.resolve(callback()).then(() => { throw reason })
  19.     );
  20.   }
  21. }

4.2 测试用例

  1. // 基础功能测试
  2. const p1 = new MyPromise((resolve) => {
  3.   setTimeout(() => resolve('成功'), 1000);
  4. });
  6. p1.then(console.log); // 1秒后输出"成功"
  8. // all方法测试
  9. const p2 = Promise.resolve(1);
  10. const p3 = new MyPromise(resolve => resolve(2));
  11. const p4 = 3;
  13. MyPromise.all([p2, p3, p4]).then(console.log); // 输出[1, 2, 3]
  15. // race方法测试
  16. const p5 = new MyPromise(resolve => setTimeout(() => resolve('慢'), 200));
  17. const p6 = new MyPromise(resolve => setTimeout(() => resolve('快'), 100));
  19. MyPromise.race([p5, p6]).then(console.log); // 100ms后输出"快"

五、实际应用场景

5.1 并行请求优化

  1. // 同时发起多个API请求
  2. const userInfo = fetch('/api/user');
  3. const orders = fetch('/api/orders');
  4. const notifications = fetch('/api/notifications');
  6. MyPromise.all([userInfo, orders, notifications])
  7.   .then(([user, orders, notifications]) => {
  8.     // 统一处理所有数据
  9.   });

5.2 超时控制实现

  1. function withTimeout(promise, timeout) {
  2.   const timeoutPromise = new MyPromise((_, reject) => {
  3.     setTimeout(() => reject(new Error('Timeout')), timeout);
  4.   });
  6.   return MyPromise.race([promise, timeoutPromise]);
  7. }
  9. // 使用示例
  10. withTimeout(fetch('/api/data'), 5000)
  11.   .then(console.log)
  12.   .catch(err => console.error(err.message));

5.3 资源加载控制

  1. // 竞速加载最佳资源
  2. function loadBestResource(resources) {
  3.   return MyPromise.race(
  4.     resources.map(url => {
  5.       const start = performance.now();
  6.       return fetch(url).then(res => {
  7.         const duration = performance.now() - start;
  8.         console.log(`${url} loaded in ${duration}ms`);
  9.         return res;
  10.       });
  11.     })
  12.   );
  13. }

六、性能优化建议

  1. 批量处理优化：对于大量Promise的all操作，考虑分批处理
  2. 错误边界处理：在all方法中添加最大错误重试机制
  3. 内存管理：长时间运行的race操作应提供取消机制
  4. 并行度控制：实现类似Promise.map的并发控制方法

七、常见问题解决方案

7.1 循环引用问题

  1. // 错误示例
  2. const p = new MyPromise(resolve => resolve());
  3. p.then(() => p); // 导致堆栈溢出
  5. // 解决方案：添加循环检测
  6. then(onFulfilled, onRejected) {
  7.   // ...前文代码...
  8.   const promise2 = new MyPromise((resolve, reject) => {
  9.     // 添加循环检测
  10.     if (promise2 === x) {
  11.       return reject(new TypeError('Chaining cycle detected'));
  12.     }
  13.     // ...剩余代码...
  14.   });
  15. }

7.2 内存泄漏处理

  1. // 在all/race方法中添加清理机制
  2. static all(promises) {
  3.   let shouldResolve = true;
  4.   return new MyPromise((resolve, reject) => {
  5.     // ...前文代码...
  6.     const cleanup = () => shouldResolve = false;
  7.     // 在适当位置调用cleanup
  8.   });
  9. }

八、进阶实现方向

  1. Promise.any：实现首个成功的Promise返回
  2. Promise.allSettled：返回所有Promise的结果状态
  3. Promise.try：统一同步/异步错误处理
  4. 取消机制：实现可取消的Promise

通过本文的完整实现，开发者可以深入理解Promise的核心机制，掌握all和race方法的实现原理，并能够在实际项目中灵活运用这些技术。完整代码已在GitHub开源，欢迎贡献改进建议。

相关文章推荐

发表评论

最热文章

关于作者

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