3.手动实现async await

经常有人说async函数是generator函数的语法糖，那么到底是怎么样一个糖呢？让我们来一层层的剥开它的糖衣。

有的同学想说，既然用了generator函数何必还要实现async呢？

这篇文章的目的就是带大家理解清楚async和generator之间到底是如何相互协作，管理异步的。

const getData = () => new Promise(resolve => setTimeout(() => resolve("data"), 1000))
 
async function test() {
  const data = await getData()
  console.log('data: ', data);
  const data2 = await getData()
  console.log('data2: ', data2);
  return 'success'
}
 
// 这样的一个函数 应该再1秒后打印data 再过一秒打印data2 最后打印success
test().then(res => console.log(res))

对于这个简单的案例来说，如果我们把它用generator函数表达，会是怎么样的呢？

function* testG() {
  // await被编译成了yield
  const data = yield getData()
  console.log('data: ', data);
  const data2 = yield getData()
  console.log('data2: ', data2);
  return 'success'
}

我们知道，generator函数是不会自动执行的，每一次调用它的next方法，会停留在下一个yield的位置。

利用这个特性，我们只要编写一个自动执行的函数，就可以让这个generator函数完全实现async函数的功能。

(17条消息) 手写async await的最简实现（20行搞定）！阿里字节面试必考_傲娇的koala的博客-CSDN博客

function asyncToGenerator(generatorFunc) {
    return function() {
      const gen = generatorFunc.apply(this, arguments)
      return new Promise((resolve, reject) => {
        function step(key, arg) {
          let generatorResult
          try {
            generatorResult = gen[key](arg)
          } catch (error) {
            return reject(error)
          }
          const { value, done } = generatorResult
          if (done) {
            return resolve(value)
          } else {
            return Promise.resolve(value).then(val => step('next', val), err => step('throw', err))
          }
        }
        step("next")
      })
    }
}