用generator函数实现一个简单的async/await原理

123 阅读1分钟

1. 首先模拟一个异步请求

async.png

2. 来看看generator函数是怎么处理异步问题的。

在一篇前端中迭代器的理解和手动封装一个迭代器我们介绍了迭代,而Generator函数就是一个可迭代的函数调用Generator函数,返回一个遍历器对象,代表Generator函数的内部指针。以后每次调用遍历器对象的next方法,就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值,是yield语句后面那个表达式的值;done属性是一个布尔值,表示是否遍历结束。

generator.png

微信截图_20220124103616.png

  • next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法,会返回一个对象,表示当前阶段的信息 (value 属性和 done 属性)。
  • value 属性是 yield 语句后面表达式的值,表示当前阶段的值;
  • done 属性是一个布尔值,表示 Generator 函数是否执行完毕,即是否还有下一个阶段(done为false 继续执行)

3. 基于generator来封装一个简易的async

手握generator时, 如何让他顺利的执行下去, 并在出错时抛出一个错误, 结束时若有要return 出来的值也需要接收到

实例.png

4. 最后,引用generator函数创建流程

result.png