logo

开发者热搜

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

作者：问答酱2025.09.19 12:47浏览量：3

简介：本文通过手写实现Promise核心方法、Generator迭代器及async/await语法糖，深度解析JavaScript异步编程的底层原理，帮助开发者掌握异步控制流的本质逻辑。

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

异步编程是JavaScript开发的核心能力，而Promise、Generator和async/await构成了现代异步编程的三大支柱。本文将通过手写实现这些核心机制，深入解析其工作原理，帮助开发者建立完整的异步编程知识体系。

一、Promise核心机制手写实现

1.1 Promise基础结构

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 : err => { throw err; };
  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函数的实现，它处理then方法返回值的各种情况：

  1. function resolvePromise(promise2, x, resolve, reject) {
  2.   // 防止循环引用
  3.   if (promise2 === x) {
  4.     return reject(new TypeError('Chaining cycle detected for promise'));
  5.   }
  7.   let called = false;
  8.   // 处理x为对象或函数的情况
  9.   if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
  10.     try {
  11.       const then = x.then;
  12.       if (typeof then === 'function') {
  13.         then.call(
  14.           x,
  15.           y => {
  16.             if (called) return;
  17.             called = true;
  18.             resolvePromise(promise2, y, resolve, reject);
  19.           },
  20.           r => {
  21.             if (called) return;
  22.             called = true;
  23.             reject(r);
  24.           }
  25.         );
  26.       } else {
  27.         resolve(x);
  28.       }
  29.     } catch (e) {
  30.       if (called) return;
  31.       called = true;
  32.       reject(e);
  33.     }
  34.   } else {
  35.     resolve(x);
  36.   }
  37. }

二、Generator函数实现原理

2.1 Generator基础实现

Generator的核心是状态机和迭代器协议：

  1. function* myGenerator() {
  2.   yield 1;
  3.   yield 2;
  4.   return 3;
  5. }
  7. // 手写实现类似功能
  8. function createIterator(generatorFn) {
  9.   const iterator = {
  10.     next: function(value) {
  11.       // 实际实现需要维护状态和上下文
  12.       // 这里简化展示流程
  13.       if (!this._init) {
  14.         this._context = generatorFn.call(this);
  15.         this._init = true;
  16.       }
  18.       const result = this._context.next(value);
  19.       return {
  20.         value: result.value,
  21.         done: result.done
  22.       };
  23.     },
  24.     _init: false,
  25.     _context: null
  26.   };
  28.   return iterator;
  29. }

2.2 迭代器协议实现

完整的迭代器需要实现[Symbol.iterator]方法：

  1. function* countUpTo(max) {
  2.   let count = 1;
  3.   while (count <= max) {
  4.     yield count++;
  5.   }
  6. }
  8. // 转换为可迭代对象
  9. const iterable = {
  10.   [Symbol.iterator]: function* () {
  11.     yield* countUpTo(3);
  12.   }
  13. };
  15. // 手写等效实现
  16. const manualIterable = {
  17.   [Symbol.iterator]: function() {
  18.     let count = 1;
  19.     const max = 3;
  21.     return {
  22.       next: function() {
  23.         if (count <= max) {
  24.           return { value: count++, done: false };
  25.         } else {
  26.           return { done: true };
  27.         }
  28.       }
  29.     };
  30.   }
  31. };

三、async/await语法糖解析

3.1 async函数本质

async函数实际上是Generator函数的语法糖，编译器会将其转换为状态机：

  1. async function fetchData() {
  2.   try {
  3.     const res = await fetch('/api/data');
  4.     const data = await res.json();
  5.     return data;
  6.   } catch (err) {
  7.     console.error(err);
  8.   }
  9. }
  11. // 等效的Generator实现
  12. function fetchDataGen() {
  13.   return regeneratorRuntime.wrap(function fetchDataGen$(_context) {
  14.     while (1) {
  15.       switch (_context.prev = _context.next) {
  16.         case 0:
  17.           _context.prev = 0;
  18.           _context.next = 3;
  19.           return regeneratorRuntime.awrap(fetch('/api/data'));
  20.         // ...其余实现
  21.       }
  22.     }
  23.   }, fetchDataGen);
  24. }

3.2 手动实现async/await模式

通过Generator+Promise可以手动实现类似async/await的效果：

  1. function run(generatorFn) {
  2.   const generator = generatorFn();
  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.   try {
  14.     return handle(generator.next());
  15.   } catch (err) {
  16.     return Promise.reject(err);
  17.   }
  18. }
  20. // 使用示例
  21. run(function* () {
  22.   try {
  23.     const res = yield fetch('/api/data');
  24.     const data = yield res.json();
  25.     console.log(data);
  26.   } catch (err) {
  27.     console.error(err);
  28.   }
  29. });

四、实际应用与最佳实践

4.1 错误处理模式

  1. // Promise错误处理
  2. fetchData()
  3.   .then(data => process(data))
  4.   .catch(err => handleError(err));
  6. // async/await错误处理
  7. async function safeFetch() {
  8.   try {
  9.     const data = await fetchData();
  10.     process(data);
  11.   } catch (err) {
  12.     handleError(err);
  13.   }
  14. }

4.2 并行控制优化

  1. // Promise.all实现
  2. function myPromiseAll(promises) {
  3.   return new Promise((resolve, reject) => {
  4.     const results = [];
  5.     let completed = 0;
  7.     promises.forEach((promise, index) => {
  8.       Promise.resolve(promise)
  9.         .then(value => {
  10.           results[index] = value;
  11.           completed++;
  12.           if (completed === promises.length) {
  13.             resolve(results);
  14.           }
  15.         })
  16.         .catch(reject);
  17.     });
  18.   });
  19. }
  21. // async/await中的并行优化
  22. async function fetchAll() {
  23.   const [user, posts] = await Promise.all([
  24.     fetchUser(),
  25.     fetchPosts()
  26.   ]);
  27.   // ...
  28. }

五、性能优化与调试技巧

5.1 微任务与宏任务调度

  1. // 验证微任务优先级
  2. console.log('script start');
  4. setTimeout(() => {
  5.   console.log('setTimeout');
  6. }, 0);
  8. new Promise((resolve) => {
  9.   console.log('Promise executor');
  10.   resolve();
  11.   console.log('Promise executor after resolve');
  12. }).then(() => {
  13.   console.log('Promise then');
  14. });
  16. console.log('script end');
  17. // 输出顺序：
  18. // script start
  19. // Promise executor
  20. // Promise executor after resolve
  21. // script end
  22. // Promise then
  23. // setTimeout

5.2 调试async/await

  1. // 使用生成器函数调试
  2. function* debugGen() {
  3.   console.log('Before yield 1');
  4.   yield 1;
  5.   console.log('Between yield 1 and 2');
  6.   yield 2;
  7.   console.log('After yield 2');
  8. }
  10. const gen = debugGen();
  11. console.log(gen.next()); // 执行到第一个yield
  12. console.log(gen.next()); // 执行到第二个yield
  13. console.log(gen.next()); // 执行完毕

六、总结与展望

通过手写实现Promise、Generator和async/await的核心机制，我们深入理解了JavaScript异步编程的底层原理。这些实现不仅帮助我们更好地使用这些特性，也为解决复杂异步问题提供了理论基础。在实际开发中，建议：

  1. 优先使用async/await提高代码可读性
  2. 合理使用Promise.all等并行方法优化性能
  3. 注意错误处理的完整性
  4. 在需要精细控制的场景考虑使用Generator

随着JavaScript生态的发展，异步编程模式仍在不断演进，但掌握这些核心原理将使开发者能够更快适应新的异步编程范式。

相关文章推荐

发表评论

最热文章

关于作者

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