generator 到 async 的简单理解。

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

1. generator

generator 函数返回一个遍历器对象

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

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

举个简单例子：

generator 函数返回一个遍历器

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

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

源码

 function *gen() {
   console.log('开始')
   let a = yield '第一步'
   console.log(a)
   let b = yield '第二步'
   console.log(b)
   let c = yield '第三步'
   console.log(c)
 }

 var it = gen()
 console.log(it.next(''))
 console.log(it.next())
 console.log(it.next())
 console.log(it.next())

转换后的代码如图（有图可见，原来的gen函数代码被转换成switch case的函数了，这个函数，就像状态机，状态不同，跳转执行的结果不同）

如图，查看源码,左边函数，被准换成右边带有状态的switch 片段

执行it.next() 的时候，内部就会调用左边的while 包裹的函数，默认_context_next = 0 (_context是内部用来存储 状态 ，next传入参数,等值得)

将_context_next 的值付给_context_prev,_context_prev就是当前传入switch的值，执行对应的case片段，修改 _context_next的值 ，return 跳出while循环

下一次调用it.next() 的时候，内部又调用左边的while 包裹的函数，将_context_next 的值付给_context_prev,_

context_prev就是当前传入switch的值，执行对应的case片段，修改 _context_next的值，return 跳出while循环

如此重复上面片段  直到 执行第四个 it.next的时候 ，执行对应的case片段，没有return 接着会执行 case: end

执行 _context_stop() 函数，得到 第四个 it.next（）的返回值，{value：undefined， done: true} 迭代结束。

借助查看babel，regenerator的实现 查找上图的几个函数，来看看以下细节

• regeneratorRuntime.mark （包裹函数，返回新函数，新函数能生成迭代器）

• _context  （保留函数执行的上下文状态）

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

• regeneratorRuntime.wrap （设置调用函数，这个地方设计的特别好，暴露接口，由makeInvokeMehtod来设置具体的invoke方法）

看看 makeInvokeMethod 返回的 invoke 方法

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

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

2. generator 简单实现

generator 函数返回一个遍历器对象，对象有next方法。

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

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

 // 第一步通过将原函数简单转换 (babel 编译过程中的节点修改可以了解一下)
 // function genSourceCode() {
 //   console.log('开始')
 //   let a = yield '第一步'
 //   console.log(a)
 //   let b = yield '第二步'
 //   console.log(b)
 //   let c = yield '第三步'
 //   console.log(c)
 // }
 // 原函数变成由gen数中的每个 yield 表达式分割的片段都重写为 switch case的新函数
 function gen$(_context) {
   while (1) {
     switch (_context.prev = _context.next) {
       case 0:
         console.log('开始');
         _context.next = 3;
         return '第一步';

       case 3:
         a = _context.sent;
         console.log(a);
         _context.next = 7;
         return '第二步';

       case 7:
         b = _context.sent;
         console.log(b);
         _context.next = 11;
         return '第三步';

       case 11:
         c = _context.sent;
         console.log(c);

       case 13:
       case "end":
         return _context.stop();
     }
   }
 }
 // context
 var context = {
   next:0,
   prev: 0,
   sent: undefined, // 这个值是用来记住每次调用next函数传递的参数
   done: false,
   stop: function stop () {
     this.done = true
   }
 }

 let gen = function() {
   return {
     next: function() {
       value = context.done ? undefined: gen$(context)
       done = context.done
       return {
         value,
         done
       }
     }
   }
 }
 var it = gen()
 console.log(it.next())
 console.log(it.next())
 console.log(it.next())
 console.log(it.next())

3. generator产生的迭代器对象 ，迭代自执行

手动麻烦，产生了自执行的需求：

 function* gen() {
   console.log('开始')
   let a = yield '第一步'
   console.log(a)
   let b = yield '第二步'
   console.log(b)
   let c = yield '第三步'
   console.log(c)
 }

 var it = gen()
 console.log(it.next(''))
 console.log(it.next())
 console.log(it.next())
 console.log(it.next())

 function co(gen) {
   let it = gen()
   return new Promise((resolve, reject) => {
     !(function next(lastValue) {
       let { value, done } = it.next(lastValue)
       console.log({ value, done })
       if (done) {
         resolve(value)
       } else {
         Promise.resolve(value).then(next,reason => reject(reason))
       }
     })()
   })
 }
 co(gen)

自执行函数，会将上一次it.next()得到的value值传递到下一个it.next()输出中 下面这行代码值得思考

Promise.resolve(value).then(next,reason => reject(reason))

4. async的简单实现

async函数，实现 基于 generator 函数和自动执行器。

 function spawn(gen) {
   return new Promise((resolve, reject) => {
     const it = gen()
     !function step(nextFn) {
       try{
       var {value, done } = nextFn()
       } catch(e) {
         reject(e)
         return
       }
       if (done) {
         resolve(value)
       } else {
         Promise.resolve(value).then((value)=>{
           step((value)=>it.next(value))
         },()=>{
           step((value)=>it.throw(value))
         })
       }
     }(()=>it.next(undefined))
   })
 }
 function* gen() {
   try {
   var a = yield new Promise((resolve,reject) =>{
     setTimeout(()=>{
       reject(100)
     },1000)
   })
 } catch(e) {
 }
   let b = yield new Promise((resolve,reject) =>{
     setTimeout(()=>{
       resolve(102)
     },1000)
   })
   return a + b
 }

 async function asyncDemo() {
   try {
   var a = await new Promise((resolve,reject) =>{
     setTimeout(()=>{
       reject(100)
     },1000)
   })
   } catch(e) {

   }
   let b = await new Promise((resolve,reject) =>{
     setTimeout(()=>{
       resolve(102)
     },1000)
   })
   return a + b
 }

 spawn(gen).then((value)=>{
   console.log('spawn-->onfulfilled:',value)
 },(value)=>{
   console.log('spawn-->onRejected:',value)
 })
 asyncDemo().then((value)=>{
   console.log('asyncDemo-->onfulfilled:',value)
 },(value)=>{
   console.log('asyncDemo-->onRejected:',value)
 })

运行上面代码 对async理解就比较深刻了。async 的内部实现generator 函数和自执行函数 。

5.总结

需要认真理解的：

函数转换成 switch case 组成的函数（代码有点似状态机模型）

async 的内部实现包括了generator 函数和自执行函数

思考 : 为何 try catch 包裹了  await rejected 的promise 后续代码才能继续执行

 try {
   var a = await new Promise((resolve, reject) => {
     setTimeout(() => {
       reject(100)
     }, 1000)
   })
 } catch (e) {
   console.log(e)
 }

看了下面代码，

 async function asyncDemo() {
   console.log('asyncDemo')
   let a = await new Promise((resolve,reject) =>{
     setTimeout(()=>{
       reject(100)
     },1000)
   })
   console.log('asyncDemo--->b')
    //为何下面代码没有执行
   let b = await new Promise((resolve,reject) =>{
     setTimeout(()=>{
       resolve(102)
     },1000)
   })
   return a + b
 }

 async function asyncDemo2() {
   console.log('asyncDemo2')
   try {
     var a = await new Promise((resolve,reject) =>{
       setTimeout(()=>{
         reject(100)
       },1000)
     })
   } catch(e){
     console.log(e)
   }
   //为何下面代码执行了  自执行出错有try catch 时候会增加一步走catch节点。
   console.log('asyncDemo2--->b')
   let b = await new Promise((resolve,reject) =>{
     setTimeout(()=>{
       resolve(102)
     },1000)
   })
   return a + b
 }
 asyncDemo().then(null,(reason)=>{
   console.log('asyncDemo:',reason)
 })
 asyncDemo2().then((reason)=>{
   console.log('asyncDemo:',reason)
 })

工具查看转化的代码，自执行出错有try catch 时候会增加一步走catch节点。

当case的promise rejected 的时候context.next 会被改变成case 6，

如图case 6：执行后没break 和return  则继续执行 case 8