generator 到 async 的简单理解。

 generator 到 async 的简单理解。觉得实现方式很有意思。

 1. generator 

generator 函数返回一个遍历器

每次调用next 方法 返回 有着value 和done 两个属性的对象

yield 后面的表达式即为 返回对象 value属性的值

举个简单例子：

generator 函数返回一个遍历器

遍历器对象每执行一次next() 都只执行了generator 函数内部部分代码，遇到yield本次执行就结束了。

借助工具查看generator 经过转换后的代码，来了解一下generator 的大概实现

源码

 1 function *gen() {
 2   console.log(‘开始‘)
 3   let a = yield ‘第一步‘
 4   console.log(a)
 5   let b = yield ‘第二步‘
 6   console.log(b)
 7   let c = yield ‘第三步‘
 8   console.log(c)
 9 }
10 
11 var it = gen() 
12 console.log(it.next(‘‘))
13 console.log(it.next())
14 console.log(it.next())
15 console.log(it.next())

转换后的代码如图

查看babel，regenerator的实现 （下文代码截取）

• regeneratorRuntime.mark

• _context 

• 新的$gen,由gen数中的每个 yield 表达式分割的片段都重写为 switch case的函数，每个 case 中使用 _context 来保存函数当前的上下文状态。

• regeneratorRuntime.wrap

看看 makeInvokeMethod 返回的 invoke 方法

从上面分析可以看出 不断调用next方法 就是不断调用 switch case（$gen函数） ， _context做记录

再次调用next方法 方法 因为标记状态变了，执行的case 就变了。

generator 到 async 的简单理解。

原文：https://www.cnblogs.com/luoxiaoer/p/11735768.html