@gerhobbelt/babel-plugin-transform-async-to-generator 是一个能够将 async/await 语法转换成 generator/yield 语法的 Babel 插件。使用该插件可以增加应用的兼容性，提高性能等等。本篇文章将详细介绍该插件的使用教程，包括安装、配置、使用、参数说明以及实际示例。
安装
安装 @gerhobbelt/babel-plugin-transform-async-to-generator 的命令如下：
npm install @gerhobbelt/babel-plugin-transform-async-to-generator --save-dev
配置
在 Babel 的配置文件 .babelrc 中添加 @gerhobbelt/babel-plugin-transform-async-to-generator 插件，如下所示：
-- -------------------- ---- -------
-
---------- -
-
--------------------------------------------------------
-
--------- -----------
--------- -----------
-
-
-
-使用
使用 @gerhobbelt/babel-plugin-transform-async-to-generator 插件可以将 async/await 语法转换成 generator/yield 语法。例如以下代码：
async function foo() {
console.log("Hello world!");
const result = await fetch("/api/data");
console.log(result);
}
foo();通过 @gerhobbelt/babel-plugin-transform-async-to-generator 插件转换后得到的代码如下所示：
-- -------------------- ---- -------
-------- ----- -
------ ---------------- -----------
-
-------- ------ -
---- - --------------------------- -- -
------------------ ---------
----- ------ - ----- -------------------
--------------------
---
------ ---------------- -----------
-
-------- --------------------- -
------ -------- -- -
----- --- - -------------- -----------
------ --- ----------------- ------- -- -
-------- --------- ---- -
--- -----
--- -
---- - --------------
- ----- ------- -
--------------
-------
-
----- - ------ ---- - - -----
-- ------ -
---------------
- ---- -
------ ----------------------------
----- -- -
------------ -----
--
----- -- -
------------- -----
-
--
-
-
------ -------------
---
--
-
------其中 _asyncToGenerator 函数是支持异步操作的生成器函数，具体实现可以参考 bluebird 的 coroutine 函数。
参数说明
@gerhobbelt/babel-plugin-transform-async-to-generator 插件支持一个可选的配置参数，具体含义如下：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| module | String | false |
指定使用的库名称（如：bluebird），可以替代插件中默认的 _asyncToGenerator 函数。 |
| method | String | false |
指定使用的库中支持异步操作的生成器函数名称（如：coroutine），可以替代插件中默认的 _asyncToGenerator 函数。 |
| resolve | String | null |
指定通过异步操作返回的解析值的参数名称。 |
示例代码
下面是一个包含具体使用场景的示例代码。
-- -------------------- ---- ------- ----- ------- - -------------------- ----- -------- ------------ - ----- ------ - ----- --------------------- ------ ------- - ----- -------- ------------ - ----- ------ - ----- --------------------- ------ ------- - ----- -------- ------ - ----- ----- - ----- ------------- ----- ----- - ----- ------------- ------------------ ------- - -------
以上代码中，我们通过 @gerhobbelt/babel-plugin-transform-async-to-generator 插件将 async/await 语法转换成 generator/yield 语法，并使用 bluebird 第三方库进行异步操作的支持，最终实现了一个异步操作的示例程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02d7ab403f2923b035bdbc