ES module语法 - generator函数 - 《好记性不如烂笔头 - 技术学习笔记》

背景
在学习async/await的时候，你肯定是会发现generator的字眼
没错！
async/await其实就是generator函数的语法糖

参考大佬文章一边学习一边写的：

https://juejin.cn/post/7007031572238958629

学习
看一下下面的例子：
value表示执行的值，done表示当前的generator是否执行完毕
根据例子来看，其实next函数调用，就代表执行力一下yield后面的值

如果是常量，也就是是一个固定值，则next执行后的结果的value值对应的就是yield后面的值
如果yield后面是一个函数，则next执行后value对应的就是函数的执行结果
如果yield后面跟的是promise，那next执行后value对应的就是一个promise结果

常量：

function* gen() {
    yield 1
    yield 2
    yield 3
}
const g = gen();
console.log(g.next()) // {value: 1, done: false}
console.log(g.next()) // {value: 2, done: false}
console.log(g.next()) // {value: 3, done: false}
console.log(g.next()) // {value: undefined, done: true}

有返回值：

function* gen() {
    yield 1
    yield 2
    yield 3
    return 4
}
const g = gen();
console.log(g.next()) // {value: 1, done: false}
console.log(g.next()) // {value: 2, done: false}
console.log(g.next()) // {value: 3, done: false}
console.log(g.next()) // {value: 4, done: true}

函数：

function fn(val) {
    return val
}
function* gen() {
    yield fn(1)
    yield fn(2)
    yield fn(3)
    return 4
}
const g = gen();
console.log(g.next()) // {value: 1, done: false}
console.log(g.next()) // {value: 2, done: false}
console.log(g.next()) // {value: 3, done: false}
console.log(g.next()) // {value: 4, done: true}

Promise：

function fn(num) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(num)
    }, 1000)
  })
}
function* gen() {
  yield fn(1)
  yield fn(2)
  return 3
}
const g = gen()
console.log(g.next()) // { value: Promise { <pending> }, done: false }
console.log(g.next()) // { value: Promise { <pending> }, done: false }
console.log(g.next()) // { value: 3, done: true }

next传参：

第一次next传参是没用的，只有从第二次开始next传参才有用
next传值时，要记住顺序是，先右边yield，后左边接收参数

这个地方可以多说一些

当第一次执行g.next()，执行yield 1
第二次执行的时候，执行console.log内容（内容就是第二次传入的参数），并且执行yield 2
第三次执行的时候，通2

所以打印出来才会如下：第二次运行先进行打印，然后再执行

function* gen() {
  const num1 = yield 1
  console.log(num1)
  const num2 = yield 2
  console.log(num2)
  return 3
}
const g = gen()
console.log(g.next()) // { value: 1, done: false }
console.log(g.next(11111))
// 11111
//  { value: 2, done: false }
console.log(g.next(22222)) 
// 22222
// { value: 3, done: true }

实现async/await
其实上方的generator函数的Promise+next传参，就很像async/await了，区别在于

gen函数执行返回值不是Promise，asyncFn执行返回值是Promise
gen函数需要执行相应的操作，才能等同于asyncFn的排队效果
gen函数执行的操作是不完善的，因为并不确定有几个yield，不确定会嵌套几次

返回promise

function* gen() {
}
function generatorToAsync (generatorFn) {
  return function () {
    return new Promise((resolve, reject) => {
    })
  }
}
const asyncFn = generatorToAsync(gen)
console.log(asyncFn()) // Promise

加入一系列复杂操作

function fn(nums) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(nums * 2)
    }, 1000)
  })
}
function* gen() {
  const num1 = yield fn(1)
  const num2 = yield fn(num1)
  const num3 = yield fn(num2)
  return num3
}
function generatorToAsync(generatorFn) {
  return function () {
    return new Promise((resolve, reject) => {
      const g = generatorFn()
      const next1 = g.next()
      next1.value.then(res1 => {
        const next2 = g.next(res1) // 传入上次的res1
        next2.value.then(res2 => {
          const next3 = g.next(res2) // 传入上次的res2
          next3.value.then(res3 => {
            // 传入上次的res3
            resolve(g.next(res3).value)
          })
        })
      })
    })
  }
}
const asyncFn = generatorToAsync(gen)
asyncFn().then(res => console.log(res)) // 3秒后输出 8

此时跟async/await就很像了，如下

async function asyncFn() {
  const num1 = await fn(1)
  const num2 = await fn(num1)
  const num3 = await fn(num2)
  return num3
}
asyncFn().then(res => console.log(res)) // 3秒后输出 8

上面的代码其实都是死代码，因为一个async函数中可能有2个await，3个await，5个await ，其实await的个数是不确定的。同样类比，generator函数中，也可能有2个yield，3个yield，5个yield，所以咱们得把代码写成活的才行

function generatorToAsync(generatorFn) {
  return function() {
    const gen = generatorFn.apply(this, arguments) // gen有可能传参
    // 返回一个Promise
    return new Promise((resolve, reject) => {
      function go(key, arg) {
        let res
        try {
          res = gen[key](arg) // 这里有可能会执行返回reject状态的Promise
        } catch (error) {
          return reject(error) // 报错的话会走catch，直接reject
        }
        // 解构获得value和done
        const { value, done } = res
        if (done) {
          // 如果done为true，说明走完了，进行resolve(value)
          return resolve(value)
        } else {
          // 如果done为false，说明没走完，还得继续走
          // value有可能是：常量，Promise，Promise有可能是成功或者失败
          return Promise.resolve(value).then(val => go('next', val), err => go('throw', err))
        }
      }
      go("next") // 第一次执行
    })
  }
}
const asyncFn = generatorToAsync(gen)
asyncFn().then(res => console.log(res))

使用
async/await版本使用

async function asyncFn() {
  const num1 = await fn(1)
  console.log(num1) // 2
  const num2 = await fn(num1)
  console.log(num2) // 4
  const num3 = await fn(num2)
  console.log(num3) // 8
  return num3
}
const asyncRes = asyncFn()
console.log(asyncRes) // Promise
asyncRes.then(res => console.log(res)) // 8

使用generator版本：

function* gen() {
  const num1 = yield fn(1)
  console.log(num1) // 2
  const num2 = yield fn(num1)
  console.log(num2) // 4
  const num3 = yield fn(num2)
  console.log(num3) // 8
  return num3
}
const genToAsync = generatorToAsync(gen)
const asyncRes = genToAsync()
console.log(asyncRes) // Promise
asyncRes.then(res => console.log(res)) // 8