logo

开发者热搜

从Promise到async/await：手写实现异步编程核心机制全解析

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

简介：本文深入解析异步编程核心机制，通过手写实现Promise全家桶、Generator及async/await，揭示其底层原理与协作关系。从基础Promise到高级语法，逐步构建完整的异步控制体系，帮助开发者彻底掌握JavaScript异步编程精髓。

一、Promise核心机制手写实现

1.1 Promise基础结构

Promise本质是一个具有状态的特殊对象，包含三种状态转换逻辑：

  1. class MyPromise {
  2.   constructor(executor) {
  3.     this.state = 'pending'; // pending/fulfilled/rejected
  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. }

关键设计点：

  • 状态机模型：严格限制状态单向转换
  • 异步回调队列：解决then方法调用时机问题
  • 错误捕获机制：通过try-catch统一处理执行器错误

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

实现要点：

  • 微任务队列模拟：使用setTimeout模拟异步调度
  • 值穿透处理：非函数参数直接透传值
  • 返回值解析：通过resolvePromise处理thenable对象

1.3 静态方法实现

  1. // 全局resolve方法
  2. static resolve(value) {
  3.   if (value instanceof MyPromise) {
  4.     return value;
  5.   }
  6.   return new MyPromise(resolve => resolve(value));
  7. }
  9. // 全局reject方法
  10. static reject(reason) {
  11.   return new MyPromise((_, reject) => reject(reason));
  12. }
  14. // 全局all方法
  15. static all(promises) {
  16.   return new MyPromise((resolve, reject) => {
  17.     const results = [];
  18.     let count = 0;
  20.     const processValue = (index, value) => {
  21.       results[index] = value;
  22.       count++;
  23.       if (count === promises.length) {
  24.         resolve(results);
  25.       }
  26.     };
  28.     promises.forEach((promise, index) => {
  29.       if (promise instanceof MyPromise) {
  30.         promise.then(
  31.           value => processValue(index, value),
  32.           reason => reject(reason)
  33.         );
  34.       } else {
  35.         processValue(index, promise);
  36.       }
  37.     });
  38.   });
  39. }

二、Generator函数实现原理

2.1 生成器基础结构

  1. function* myGenerator() {
  2.   yield 1;
  3.   yield 2;
  4.   return 3;
  5. }
  7. // 手写生成器迭代器
  8. class Generator {
  9.   constructor(generatorFn) {
  10.     this.generatorFn = generatorFn;
  11.     this.context = {};
  12.     this.step = null;
  13.     this.init();
  14.   }
  16.   init() {
  17.     this.step = this.generatorFn.call(this.context);
  18.   }
  20.   next(value) {
  21.     const result = this.step.next(value);
  22.     if (!result.done) {
  23.       // 保存当前执行位置
  24.       this.step = result.value;
  25.     }
  26.     return result;
  27.   }
  29.   [Symbol.iterator]() {
  30.     return this;
  31.   }
  32. }

核心机制：

  • 状态保存：通过闭包保存执行上下文
  • 迭代协议：实现next方法返回{value, done}对象
  • 协程模型：yield表达式暂停执行

2.2 自动执行器实现

  1. function co(generatorFn) {
  2.   return new Promise((resolve, reject) => {
  3.     const gen = generatorFn();
  5.     function step(nextFn) {
  6.       let result;
  7.       try {
  8.         result = nextFn();
  9.       } catch (err) {
  10.         return reject(err);
  11.       }
  13.       if (result.done) {
  14.         return resolve(result.value);
  15.       }
  17.       Promise.resolve(result.value).then(
  18.         value => step(() => gen.next(value)),
  19.         reason => step(() => gen.throw(reason))
  20.       );
  21.     }
  23.     step(() => gen.next());
  24.   });
  25. }

执行流程：

  1. 初始化生成器
  2. 递归执行next/throw方法
  3. 自动处理Promise链式调用
  4. 最终结果透传

三、async/await编译原理

3.1 语法糖转换

async函数本质是Generator函数的语法糖，Babel转换示例：

  1. // 源码
  2. async function fetchData() {
  3.   const res = await fetch('/api');
  4.   return res.json();
  5. }
  7. // 转换后
  8. function fetchData() {
  9.   return regeneratorRuntime.async(function fetchData$(_context) {
  10.     while (1) {
  11.       switch (_context.prev = _context.next) {
  12.         case 0:
  13.           _context.next = 2;
  14.           return regeneratorRuntime.awrap(fetch('/api'));
  15.         case 2:
  16.           res = _context.sent;
  17.           return _context.abrupt('return', res.json());
  18.         case 4:
  19.         case 'end':
  20.           return _context.stop();
  21.       }
  22.     }
  23.   }, null, this);
  24. }

关键转换点：

  • async函数转换为Generator函数
  • await表达式转换为yield表达式
  • 自动添加执行器逻辑

3.2 运行时支持

regeneratorRuntime核心方法：

  1. const regeneratorRuntime = {
  2.   async(generatorFn, receiver, thisArg) {
  3.     return new Promise((resolve, reject) => {
  4.       const generator = generatorFn.apply(thisArg, [receiver]);
  6.       function handle(result) {
  7.         if (result.done) {
  8.           resolve(result.value);
  9.         } else {
  10.           Promise.resolve(result.value).then(
  11.             value => handle(generator.next(value)),
  12.             reason => {
  13.               try {
  14.                 handle(generator.throw(reason));
  15.               } catch (err) {
  16.                 reject(err);
  17.               }
  18.             }
  19.           );
  20.         }
  21.       }
  23.       handle(generator.next());
  24.     });
  25.   },
  27.   awrap(promise) {
  28.     return { __await: promise };
  29.   }
  30. };

四、异步编程最佳实践

4.1 Promise组合技巧

  1. // 并发控制
  2. function limitConcurrency(promises, limit) {
  3.   return new Promise((resolve, reject) => {
  4.     const results = [];
  5.     let index = 0;
  6.     let resolving = 0;
  8.     function execute() {
  9.       if (index >= promises.length && resolving === 0) {
  10.         return resolve(results);
  11.       }
  13.       while (resolving < limit && index < promises.length) {
  14.         resolving++;
  15.         const currentIndex = index++;
  16.         Promise.resolve(promises[currentIndex]())
  17.           .then(result => {
  18.             results[currentIndex] = result;
  19.           })
  20.           .catch(reject)
  21.           .finally(() => {
  22.             resolving--;
  23.             execute();
  24.           });
  25.       }
  26.     }
  28.     execute();
  29.   });
  30. }

4.2 错误处理模式

  1. // 集中式错误处理
  2. async function safeExecute(asyncFn) {
  3.   try {
  4.     return { success: true, data: await asyncFn() };
  5.   } catch (error) {
  6.     return { success: false, error };
  7.   }
  8. }
  10. // 链式错误恢复
  11. function retry(fn, times) {
  12.   return new Promise((resolve, reject) => {
  13.     function attempt() {
  14.       Promise.resolve(fn())
  15.         .then(resolve)
  16.         .catch((err) => {
  17.           if (times-- <= 0) {
  18.             reject(err);
  19.           } else {
  20.             attempt();
  21.           }
  22.         });
  23.     }
  24.     attempt();
  25.   });
  26. }

4.3 性能优化建议

  1. 避免Promise嵌套：使用扁平化链式调用
  2. 合理使用缓存：对重复请求结果进行缓存
  3. 资源释放：及时取消不再需要的请求
  4. 批量处理：合并多个小请求为大请求

五、完整实现示例

  1. // 完整Promise实现
  2. class CompletePromise {
  3.   // ...前文Promise实现代码...
  4. }
  6. // 添加catch方法
  7. CompletePromise.prototype.catch = function(onRejected) {
  8.   return this.then(null, onRejected);
  9. };
  11. // 添加finally方法
  12. CompletePromise.prototype.finally = function(callback) {
  13.   return this.then(
  14.     value => CompletePromise.resolve(callback()).then(() => value),
  15.     reason => CompletePromise.resolve(callback()).then(() => { throw reason })
  16.   );
  17. };
  19. // 测试用例
  20. const promise = new CompletePromise((resolve) => {
  21.   setTimeout(() => resolve('Success'), 1000);
  22. });
  24. promise
  25.   .then(res => {
  26.     console.log(res); // Success
  27.     return new CompletePromise(resolve => resolve('Nested'));
  28.   })
  29.   .then(res => console.log(res)) // Nested
  30.   .catch(err => console.error(err))
  31.   .finally(() => console.log('Completed'));

六、总结与展望

  1. 实现要点总结：

    • Promise核心是状态机+异步回调队列
    • Generator通过yield实现协程控制
    • async/await是Generator的语法糖封装

  2. 应用场景选择：

    • 简单异步：Promise直接使用
    • 复杂流程：Generator+co组合
    • 现代开发：优先使用async/await

  3. 未来演进方向：

    • 结合Observables处理流式数据
    • 与Web Workers的异步集成
    • 更精细的并发控制机制

通过手写实现这些核心机制，开发者不仅能深入理解JavaScript异步编程原理，还能在实际开发中更灵活地运用这些技术，编写出更健壮、高效的异步代码。

相关文章推荐

发表评论

最热文章

关于作者

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