前言
在 ECMAScript 2018 中，提出了 Async Generator functions 这一新特性，允许我们使用 async 和 await 来控制生成器函数的异步行为，这在某些场景下是非常有用的特性。不过，由于该特性不是所有浏览器都支持，需要使用 Babel 进行转换。本篇文章将介绍如何使用 Babel 的插件 @babel/plugin-proposal-async-generator-functions 来实现该特性的转换。
安装
首先需要确保已经安装了 Babel，可以使用下面的命令进行安装：
--- ------- ---------- ----------- ----------
然后，安装 @babel/plugin-proposal-async-generator-functions：
--- ------- ---------- ------------------------------------------------
配置
接着，在项目的 .babelrc 或 babel.config.js 文件中，加入 @babel/plugin-proposal-async-generator-functions 插件：
-- -------- - ---------- ---------------------------------------------------- -
或
-- --------------- -------------- - - -------- ---------------------------------------------------- --
示例
现在，我们来看一些示例代码来演示 @babel/plugin-proposal-async-generator-functions 的转换功能。
示例 1：使用 Async Generator functions
----- --------- ---------------- -
----- ----- -------------------
----- ----- -------------------
-
----- -------- ------ -
--- ----- ------ ----- -- ----------------- -
-------------------
-
-
-------这段代码定义了一个使用了 Async Generator functions 的生成器函数 asyncGenerator，它使用 Promise.resolve 延迟了两次值的生成，然后通过 for await...of 循环输出了所有生成的值。
经过 Babel 编译转换后，它会变成：
--- --------------- - -------- -- -
-------- ---------------- -
------ --------------------------------- ------------------------- -
----- --- -
------ --------------- - --------------- -
---- --
------------- - --
------ ---------------------------------------------
---- --
------------- - --
------ ---------------------------------------------
---- --
---- ------
------ ----------------
-
-
---
-
------ ---------------
----
----- -------- ------ -
--- ---------------- - ------------------
--- -
--- ---- -
--- ---- - ----- ------------------------
--- ----- - -----------
-------------------
-
- ----- ----- -
-----------------
-
-
-------可以看到，生成器函数被转换为了一个 IIFE（立即调用函数表达式），用 regeneratorRuntime.async 和 regeneratorRuntime.awrap 来控制异步操作，for await...of 循环被转换为了使用 try...catch 来处理异步操作异常的代码。
示例 2：使用普通生成器函数
再看一下使用普通生成器函数的例子：
--------- ----------- -
----- --
----- --
-
----- -------- ------ -
--- ----- ------ ----- -- ------------ -
-------------------
-
-
-------这个例子使用普通生成器函数，通过 for await...of 循环输出了值。但是经过 Babel 编译后，输出的结果并不是我们所期望的：
--- ------- - ------------------------------------------------
-------- ----------- -
------ -------------------------------- -------------------- -
----- --- -
------ --------------- - --------------- -
---- --
------------- - --
------ --
---- --
------------- - --
------ --
---- --
---- ------
------ ----------------
-
-
-- ---------
-
----- -------- ------ -
--- ----- ------ ----- -- ------------ -
-------------------
-
-
-------这是因为普通生成器函数不能通过 await 来控制异步操作，所以在经过 Babel 编译后，for await...of 循环被视为普通的 for...of 循环。
总结
通过本文的介绍，我们可以了解到如何使用 Babel 插件 @babel/plugin-proposal-async-generator-functions 来实现 ECMAScript 2018 中 Async Generator functions 新特性的转换。这对于开发中使用这一新特性的时候非常有用，不仅提高了兼容性，也方便了代码的维护和分享。如果觉得本文对您有所帮助，请点个赞支持一下吧！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/92374