logo

开发者热搜

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

作者：demo2025.09.19 12:48浏览量：0

简介：本文通过手写实现Promise核心方法、Generator执行器及async/await编译器，深度解析JavaScript异步编程的底层原理，帮助开发者理解并掌握现代异步代码的设计模式。

异步编程的演进与核心机制

JavaScript的异步编程经历了从回调函数到Promise，再到Generator与async/await的演进过程。理解这些机制的实现原理，不仅能帮助开发者编写更健壮的代码，还能在调试复杂异步逻辑时游刃有余。本文将通过手写实现这些核心组件，揭示其背后的设计哲学。

一、Promise全家桶实现

1.1 Promise基础结构

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

关键点解析：

  • 状态机设计：通过state字段严格区分三种状态
  • 异步回调队列：使用数组存储then注册的回调
  • 错误捕获：在executor执行时包裹try-catch

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 resolvePromise规范实现

这是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 ((typeof x === 'object' && x !== null) || 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. }

二、Generator执行器实现

Generator函数提供了更精细的异步控制能力，其执行需要特殊机制：

2.1 Generator基础结构

  1. function* gen() {
  2.   const a = yield 1;
  3.   const b = yield a + 2;
  4.   return b + 3;
  5. }

2.2 手动执行Generator

  1. function runGenerator(genFn) {
  2.   const generator = genFn();
  4.   function handle(result) {
  5.     if (result.done) return Promise.resolve(result.value);
  7.     return Promise.resolve(result.value).then(
  8.       res => handle(generator.next(res)),
  9.       err => handle(generator.throw(err))
  10.     );
  11.   }
  13.   return handle(generator.next());
  14. }
  16. // 使用示例
  17. runGenerator(gen).then(console.log); // 输出最终结果

2.3 递归执行器优化

更完整的实现可以处理return和throw：

  1. function asyncRun(generatorFunc) {
  2.   return new Promise((resolve, reject) => {
  3.     const generator = generatorFunc();
  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.         v => step(() => generator.next(v)),
  19.         e => step(() => generator.throw(e))
  20.       );
  21.     }
  23.     step(() => generator.next());
  24.   });
  25. }

三、async/await编译器原理

async/await本质上是Generator的语法糖，其编译过程可以这样理解：

3.1 基础转换示例

原始代码：

  1. async function fetchData() {
  2.   const a = await apiCall1();
  3.   const b = await apiCall2(a);
  4.   return b;
  5. }

等价转换：

  1. function fetchData() {
  2.   return spawn(function* () {
  3.     const a = yield apiCall1();
  4.     const b = yield apiCall2(a);
  5.     return b;
  6.   });
  7. }
  9. function spawn(genF) {
  10.   return new Promise((resolve, reject) => {
  11.     const gen = genF();
  12.     step(() => gen.next());
  14.     function step(nextFn) {
  15.       let result;
  16.       try {
  17.         result = nextFn();
  18.       } catch (err) {
  19.         return reject(err);
  20.       }
  22.       if (result.done) return resolve(result.value);
  24.       Promise.resolve(result.value).then(
  25.         v => step(() => gen.next(v)),
  26.         e => step(() => gen.throw(e))
  27.       );
  28.     }
  29.   });
  30. }

3.2 错误处理机制

async函数自动捕获异常并转换为rejected Promise：

  1. async function test() {
  2.   throw new Error('Oops!');
  3. }
  5. test().catch(e => console.log(e)); // 捕获错误

等价于：

  1. function test() {
  2.   return spawn(function* () {
  3.     throw new Error('Oops!');
  4.   });
  5. }

四、实践应用建议

  1. Promise使用技巧：

    • 优先使用async/await替代.then()链
    • 实现cancelable Promise时添加abort控制器
    • 使用Promise.allSettled处理部分失败场景

  2. Generator适用场景：

    • 需要手动控制执行流程时
    • 实现自定义协程调度
    • 复杂状态机实现

  3. async/await最佳实践：

    • 避免在顶层await导致模块加载阻塞
    • 使用try/catch替代.catch()进行错误处理
    • 合理使用IIFE处理并行异步操作

五、性能优化方向

  1. Promise优化：

    • 避免在热路径中创建大量Promise实例
    • 使用微任务队列(process.nextTick/MutationObserver)优化调度

  2. Generator优化：

    • 复用Generator实例减少内存分配
    • 对于简单序列使用数组迭代替代Generator

  3. async/await优化：

    • 避免在循环中重复声明async函数
    • 使用Promise池控制并发数

六、调试技巧

  1. Promise调试：

    • 使用Promise.prototype.finally添加调试钩子
    • 实现带日志的Promise子类

  2. Generator调试：

    • 在yield处设置断点
    • 使用generator.return()提前终止

  3. async/await调试：

    • 将await表达式提取为变量便于检查
    • 使用async_hooks模块追踪执行上下文

总结与展望

通过手写实现这些核心组件，我们深入理解了JavaScript异步编程的底层机制。从Promise的状态管理到Generator的协程控制，再到async/await的语法糖转换，每个层次都体现了语言设计者的精妙构思。在实际开发中，合理选择异步编程模式，结合具体场景进行优化，能够显著提升代码的可维护性和性能表现。随着JavaScript引擎的不断优化，这些异步机制的性能差距正在逐渐缩小，但理解其原理仍对编写高质量代码至关重要。

相关文章推荐

发表评论

最热文章

关于作者

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