ES2017 标准引入了 async 函数，使得异步操作变得更加方便。

　　async 函数是什么?一句话，它就是 Generator 函数的语法糖。研究 async 的原理，就必须先弄清楚 Generator 是个啥。

　　Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

　　形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号;二是，函数体内部使用yield表达式，定义不同的内部状态(yield在英语里的意思就是“产出”)

　　看一个例子：

　　上面代码中，调用 Generator 函数，会返回一个内部指针(即遍历器)g。这是 Generator 函数不同于普通函数的另一个地方，即执行它不会返回结果，返回的是指针对象。调用指针g的next方法，会移动内部指针(即执行异步任务的第一段)，指向第一个遇到的yield语句，上例是执行到x + 2为止。

　　换言之，next方法的作用是分阶段执行Generator函数。每次调用next方法，会返回一个对象，表示当前阶段的信息(value属性和done属性)。value属性是yield语句后面表达式的值，表示当前阶段的值;done属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。

　　这样手工的执行next()函数，着实有些麻烦，能写个工具让他自动执行吗?那我们就来试试：

　　封装一个 spawn 函数，返回一个 spawn 函数，给函数传入 Generator函数作为参数，spawn 实现 next() 方法的执行。

　　spawn 函数的实现：

　　应用这个方法执行一下第一个例子：

　　如果 yield 后面是个 Promise, 就可以实现异步了：

　　这样，过一秒后就打印 3 了。

上一篇

小白学前端之webstorm是什么软件

下一篇

小白学前端之async 的原理（下）