[js异步编程]封装Generator的co函数

我们使用ES7的语法 async await可以将异步函数来同步调用。 其实原理是利用了ES6的Generator。我们可以封装一个Generator的co函数，来理解async await

/*
 * @Author: sunxy
 * @Date: 2021-07-13 22:24:35
 * @LastEditors: sunxy
 * @LastEditTime: 2021-07-13 23:02:13
 * @Description:  Generator 
 * @FilePath: /feir/src/components/Generator.js
 */

const myAjax = function (str) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(str)
    }, 3000)
  })
}

function* gen() {
  console.log('-----000----')
  yield myAjax('11111')
  console.log('-----111----')
  yield myAjax('22222')
  console.log('-----222----')
  yield myAjax('33333')
  console.log('-----333----')

}
let g = gen()
//g() //不是一个函数  g is not a function
console.log(g) //  [Generator] {}

// 封装co函数 可以使Generator顺序执行，其实 async await 函数就是Generator和co的语法糖
function co(fun) {
  let f = fun()
  function hander(g) {
    if (g.done) return
    g.value.then(res => {
      console.log(res)
      hander(f.next(res)) // 递归执行
    })
  }
  hander(f.next())
}
co(gen)
//执行顺序
// -----000----
// 11111
// -----111----
// 22222
// -----222----
// 33333
// -----333----

async 相当于 * ； await 相当于 yield

// async 相当于 * ； await 相当于 yield
async function at(){
  console.log('aaa-----000----')
  await myAjax('aa11111')
  console.log('aa-----111----')
  await myAjax('aa22222')
  console.log('aa-----222----')
  await myAjax('aa33333')
  console.log('aa-----333----')
}
//at() 效果与上面的一致