logo

开发者热搜

手写Promise核心实现与静态方法解析：all与race的深度实践

作者：新兰2025.09.19 12:47浏览量：1

简介：本文通过手写Promise类及静态方法all/race，深度解析异步编程核心机制，结合代码示例与场景分析，帮助开发者掌握Promise底层原理并提升实战能力。

一、Promise核心机制解析

1.1 Promise基础规范

Promise是ES6引入的异步解决方案，遵循Promises/A+规范，包含三种状态：

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

状态转换具有不可逆性，一旦从Pending转为Fulfilled/Rejected，将永久保持该状态。

1.2 手写Promise类实现

  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.     // 参数可选处理
  34.     onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  35.     onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };
  37.     const promise2 = new MyPromise((resolve, reject) => {
  38.       if (this.state === 'fulfilled') {
  39.         setTimeout(() => {
  40.           try {
  41.             const x = onFulfilled(this.value);
  42.             resolvePromise(promise2, x, resolve, reject);
  43.           } catch (e) {
  44.             reject(e);
  45.           }
  46.         }, 0);
  47.       } else if (this.state === 'rejected') {
  48.         setTimeout(() => {
  49.           try {
  50.             const x = onRejected(this.reason);
  51.             resolvePromise(promise2, x, resolve, reject);
  52.           } catch (e) {
  53.             reject(e);
  54.           }
  55.         }, 0);
  56.       } else if (this.state === 'pending') {
  57.         this.onFulfilledCallbacks.push(() => {
  58.           setTimeout(() => {
  59.             try {
  60.               const x = onFulfilled(this.value);
  61.               resolvePromise(promise2, x, resolve, reject);
  62.             } catch (e) {
  63.               reject(e);
  64.             }
  65.           }, 0);
  66.         });
  68.         this.onRejectedCallbacks.push(() => {
  69.           setTimeout(() => {
  70.             try {
  71.               const x = onRejected(this.reason);
  72.               resolvePromise(promise2, x, resolve, reject);
  73.             } catch (e) {
  74.               reject(e);
  75.             }
  76.           }, 0);
  77.         });
  78.       }
  79.     });
  81.     return promise2;
  82.   }
  83. }

关键实现点：

  1. 状态管理：通过闭包保存resolve/reject方法
  2. 异步调度：使用setTimeout确保then方法异步执行
  3. 链式调用：每次then返回新Promise实例
  4. 错误处理：try-catch包裹执行过程

1.3 resolvePromise解析

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

该函数处理Promise解析的核心逻辑，包括：

  1. 循环引用检测
  2. thenable对象处理
  3. 状态变更的唯一性保证

二、静态方法实现

2.1 Promise.all实现

  1. MyPromise.all = function(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. };

关键特性：

  1. 参数校验：自动包装非Promise值
  2. 顺序保持：结果数组与输入顺序一致
  3. 短路机制：第一个rejected即终止
  4. 空数组处理：直接resolve空数组

2.2 Promise.race实现

  1. MyPromise.race = function(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 => resolve(value),
  10.         reason => reject(reason)
  11.       );
  12.     });
  13.   });
  14. };

特性说明：

  1. 竞速机制：第一个完成（无论成功失败）的Promise决定结果
  2. 参数处理：同样支持非Promise值
  3. 空数组处理：规范未明确，实际实现可能挂起

三、实战应用场景

3.1 并发请求控制

  1. // 同时发起多个API请求
  2. function fetchAllData(urls) {
  3.   return MyPromise.all(
  4.     urls.map(url => 
  5.       fetch(url).then(res => res.json())
  6.     )
  7.   );
  8. }
  10. // 优先获取最快响应
  11. function getFastestResponse(urls) {
  12.   return MyPromise.race(
  13.     urls.map(url => 
  14.       fetch(url).then(res => res.json())
  15.     )
  16.   );
  17. }

3.2 超时控制实现

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

四、常见问题与解决方案

4.1 内存泄漏风险

问题：未清理的回调队列可能导致内存泄漏
解决方案：

  1. // 在Promise类中添加取消机制
  2. class CancelablePromise extends MyPromise {
  3.   constructor(executor) {
  4.     super(executor);
  5.     this.cancelHandlers = [];
  6.   }
  8.   cancel(reason) {
  9.     this.cancelHandlers.forEach(handler => handler(reason));
  10.     this.reject(new Error(`Canceled: ${reason}`));
  11.   }
  13.   then(onFulfilled, onRejected) {
  14.     const promise2 = super.then(onFulfilled, onRejected);
  15.     if (typeof onFulfilled === 'function') {
  16.       this.cancelHandlers.push(() => {
  17.         onFulfilled = null; // 清理引用
  18.       });
  19.     }
  20.     return promise2;
  21.   }
  22. }

4.2 错误处理最佳实践

  1. 始终在Promise链末尾添加.catch()
  2. 使用async/await时配合try-catch
  3. 区分可恢复错误和致命错误

五、性能优化建议

  1. 批量处理：对于大量Promise，考虑分批处理

  2. 并发控制：使用信号量模式限制并发数

    1. class PromisePool {
    2. constructor(maxConcurrent) {
    3.  this.maxConcurrent = maxConcurrent;
    4.  this.running = 0;
    5.  this.queue = [];
    6. }
    8. add(promiseGenerator) {
    9.  return new MyPromise((resolve, reject) => {
    10.    this.queue.push({ promiseGenerator, resolve, reject });
    11.    this.run();
    12.  });
    13. }
    15. run() {
    16.  while (this.running < this.maxConcurrent && this.queue.length) {
    17.    const { promiseGenerator, resolve, reject } = this.queue.shift();
    18.    this.running++;
    19.    promiseGenerator()
    20.      .then(resolve, reject)
    21.      .finally(() => {
    22.        this.running--;
    23.        this.run();
    24.      });
    25.  }
    26. }
    27. }

  3. 缓存策略：对重复请求使用Memoization

六、总结与展望

通过手写实现Promise核心机制，我们深入理解了：

  1. 状态机的设计原理
  2. 异步调度的实现技巧
  3. 链式调用的延续性保证
  4. 错误传播的机制

未来发展方向：

  1. 支持Async/Await语法
  2. 实现Promise.try统一同步/异步错误处理
  3. 添加进度通知能力
  4. 集成取消令牌模式

完整实现代码已覆盖Promise核心功能，开发者可通过扩展上述基础实现，构建更强大的异步控制工具。建议在实际项目中先使用原生Promise，在需要特殊功能时再考虑自定义实现。

相关文章推荐

发表评论

最热文章

关于作者

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