方法 手写promise_手写async await的最简实现（20行搞定）「JS篇」

作者：前端瓶子君

转发链接：https://mp.weixin.qq.com/s/em663Ctl7UxYwPWkm-hR2g

前言

如果让你手写async函数的实现，你是不是会觉得很复杂？这篇文章带你用20行搞定它的核心。

经常有人说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 最后打印successtest().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函数的功能。

const getData = () => new Promise(resolve => setTimeout(() => resolve("data"), 1000))  var test = asyncToGenerator(    function* testG() {      // await被编译成了yield      const data = yield getData()      console.log('data: ', data);      const data2 = yield getData()      console.log('data2: ', data2);      return 'success'    })test().then(res => console.log(res))

那么大体上的思路已经确定了，

asyncToGenerator接受一个generator函数，返回一个promise，

关键就在于&#