在前端开发中，异步编程是非常常见的一种编程方式。然而在 ES6 之前，异步编程并不是 JS 的强项，开发者需要使用回调函数、Promise 等方式来实现异步编程。而 ES6 之后，JS 引入了 async/await 的语法糖，让异步编程更加简单明了。但是这个语法并不兼容所有的浏览器，因此需要一个转换器来将 async/await 转换成 ES5 可以理解的代码。这时候，就可以用到一个非常常用的 Babel 插件：babel-plugin-transform-async-to-generator。
Babel-plugin-transform-async-to-generator 插件是什么？
babel-plugin-transform-async-to-generator 是一个 Babel 插件，用来将 async/await 语法转换成 ES5 的生成器函数（generator functions）。这个插件会将 async 函数转换成一个带有生成器函数和 Promise 的代码。生成器函数可以通过 for..of 循环来遍历，而 Promise 则提供了异步操作的解决方案。由于生成器函数是 ES6 语法，因此在转换的过程中，还需要将生成器函数转换成 ES5 可以理解的函数。
Babel-plugin-transform-async-to-generator 插件的使用方法
首先需要安装 babel-plugin-transform-async-to-generator 插件，在项目中通过 babel 转换器使用插件。
npm install --save-dev babel-plugin-transform-async-to-generator
在 babel 配置文件中，配置使用插件。
{
"plugins": ["transform-async-to-generator"]
}现在可以愉快的使用 async/await 语法了。例如一个基础的 async 函数：
async function func() {
const res = await fetch('https://example.com/data.json');
console.log(res);
}使用 babel-plugin-transform-async-to-generator 转换后的代码如下：
function func() {
return _asyncToGenerator(function* () {
const res = yield fetch('https://example.com/data.json');
console.log(res);
})();
}可以看到，async 函数已经被转换成一个生成器函数。
Babel-plugin-transform-async-to-generator 插件的应用场景
支持最新的异步语法部署到老版本浏览器。JS 异步编程正趋向于 async/await 风格，但是旧版浏览器不支持此语法，使用 transform-async-to-generator 就可以将新语法转换成旧版 ES5 语法，从而将代码部署到更多的客户端。
实现异步代码的同步风格调用。在异步回调嵌套的场景下，代码可读性很差，很难维护。通过 async/await 在代码中建立起同步调用的逻辑，利于代码组织和维护。
总结
babel-plugin-transform-async-to-generator 插件是一个非常实用的 Babel 插件，能够将 async/await 语法转换成 ES5 可以理解的代码，从而部署到更多的客户端。在异步编程的场景下，使用 async/await 能够使代码更加清晰简单，而 babel-plugin-transform-async-to-generator 则可以将新语法转换成旧版 ES5 语法，从而实现异步代码的同步风格调用。更多的使用场景需要在未来多的实践中发掘。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654f44727d4982a6eb839dd7