花样繁多，Async 编译成这样

近段时间，出现了许多有关 Babel 将 Async 编译成什么样子的文章，但很少有文章以一种独到而又深入浅出的方式展开论述，本文正好尝试着做到这一点。

而一个众所周知的事实是：Async 函数是由 Generator 函数实现的。

在实现 Async 函数编译之前，还是先看看 Promise 和 Generator 函数。

Promise

什么是 Promise 呢？Promise 是异步编程的一种解决方案，可以将异步操作以同步操作的形式表现出来。它提供类似于回调函数的机制，但又更加容易使用。Promise 有两个状态：Pending 和 Resolved，Pending 等待中，Resolved 已完成。值得注意的是，Promise 只有当被 Resolved 时才能获得值，这个值可以通过 Promise 的 then 方法获取。

Generator 函数

说完了 Promise，再来看一下 Generator 函数。Generator 函数是一种 JavaScript 函数，可以生成一个值序列。该函数通过 yield 生成值，Generator 函数可以被暂停和恢复，这是通过 Generator 函数的执行器对象来实现的。Generator 函数的执行器对象有两种方法：next() 和 throw()，next() 方法用于恢复 Generator 函数的执行，throw() 方法用于抛出异常。例子如下：

``` function* gen() { yield 1; yield 2; yield 3; }

const generator = gen();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

## Async 函数

<p>最后来说说 Async 函数。Async 函数是一种语法糖，可以让我们更方便地编写异步代码。Async 函数内部使用 Generator 函数来实现，Async 函数的编译过程如下：</p>

1. 将 Async 函数转为 Generator 函数。
2. 在 Generator 函数内部添加一个 try...catch 块。
3. 在 try 块中，执行 Generator 函数的代码。
4. 在 catch 块中，捕获 Generator 函数抛出的异常。
5. 将 Generator 函数的返回值包装成一个 Promise 对象。

<p>需要注意的是，Async 函数只能在支持 Generator 函数的环境中运行，像一些不支持 Generator 函数的较老的浏览器和 Node.js 版本可能无法支持 Async 函数。</p>

## Babel

<p>Babel 是一个 JavaScript 编译器，可以将新版本的 JavaScript 代码转换为旧版本的 JavaScript 代码，以使其能够在旧的浏览器或 Node.js 版本中运行。Babel 的编译过程如下：</p>

1. 将源代码解析成抽象语法树（AST）。
2. 在 AST 上应用各种转换规则。
3. 将转换后的 AST 生成新的代码。

<p>Babel 中有一个插件叫做 "transform-async-to-generator"，这个插件可以将 Async 函数转为 Generator 函数。该插件的编译过程如下：</p>

1. 将 Async 函数转为 Generator 函数。
2. 在 Generator 函数内部添加一个 try...catch 块。
3. 在 try 块中，执行 Generator 函数的代码。
4. 在 catch 块中，捕获 Generator 函数抛出的异常。
5. 将 Generator 函数的返回值包装成一个 Promise 对象。

<p>有了 "transform-async-to-generator" 插件，就可以在不支持 Async 函数的环境中运行 Async 函数代码了。</p>

## 结语

<p>本文介绍了 Async 函数的编译过程，以及 Babel 如何将 Async 函数转为 Generator 函数。希望这篇文章对您有所帮助。</p>
</div>