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