Generator 是 ES6 中的一个重要特性，它可以让我们更方便地控制异步流程，提高代码的可读性和可维护性。本文将介绍 Generator 的基本使用和一些高级技巧。
基本使用
Generator 是一个函数，它可以通过 function* 关键字来定义。Generator 函数可以通过 yield 关键字来暂停执行，并返回一个值给调用方。调用方可以通过 next 方法来恢复执行，同时可以向 Generator 函数传递一个参数。
下面是一个简单的示例：
-- -------------------- ---- ------- --------- ------- - ----- -------- ----- -------- ------ ------- - ----- --------- - -------- ------------------------------ -- - ------ -------- ----- ----- - ------------------------------ -- - ------ -------- ----- ----- - ------------------------------ -- - ------ ------- ----- ---- -
在上面的示例中，我们定义了一个 Generator 函数 hello，它返回了三个值：hello、world 和 done。我们通过 const generator = hello() 的方式创建了一个 Generator 实例，然后通过 generator.next() 方法来依次获取每个返回值。
异步流程控制
Generator 函数最常用的场景是异步流程控制。在异步编程中，我们经常需要嵌套多个回调函数，使得代码难以理解和维护。而 Generator 函数可以通过 yield 关键字来暂停异步操作，并等待异步操作完成后再恢复执行。
下面是一个使用 Generator 函数控制异步流程的示例：
-- -------------------- ---- -------
--------- ----------------- -
----- ---- - ----- ------------------------------
----- --------- - ----- ----------------------------------------
------ - ----- --------- --
-
-------- -------------- -
----- -------- - ------------
-------- --------- ------ ---- -- -
-- ------ -
------ -----------------------
-
------ ----------------------
------------ -- -------------------------------
------------ -- -----------------------
-
------ -------------------------
-
-----------------
------------ -- --------------------
------------ -- ----------------------在上面的示例中，我们定义了一个 Generator 函数 fetchUser，它通过 yield 关键字暂停异步操作，并等待异步操作完成后再恢复执行。我们又定义了一个 run 函数，它通过递归调用 iterate 函数来依次执行 Generator 函数中的每个步骤，并将结果传递给下一个步骤。最终，run 函数返回一个 Promise 对象，用于处理异步操作的结果。
高级技巧
除了基本使用和异步流程控制，Generator 还有一些高级技巧，可以帮助我们更好地使用它。
生成器委托
Generator 可以通过 yield* 关键字来委托给另一个 Generator 函数处理。这样可以避免代码重复，并让异步流程更加清晰。
下面是一个使用生成器委托的示例：
-- -------------------- ---- ------- --------- ----------------- - ----- ---- - ----- ------------------------------ ----- --------- - ------ ----------------------- ------ - ----- --------- -- - --------- ---------------------- - ----- --------- - ----- ---------------------------------------- ------ ---------- -
在上面的示例中，我们定义了两个 Generator 函数 fetchUser 和 fetchFollowers。fetchUser 函数通过 yield* 关键字委托给 fetchFollowers 函数处理，从而避免了重复的异步操作。
双向通信
Generator 函数可以通过 yield 和 next 方法来实现双向通信。这样可以让 Generator 函数和调用方之间互相传递数据，从而实现更复杂的异步流程控制。
下面是一个使用双向通信的示例：
-- -------------------- ---- -------
--------- ----------- -
----- ----- - ----- ------------
----- ---- - ----- -----------------------------
------ -----
-
-------- -------------- -
----- -------- - ------------
-------- --------- ------ ---- -- -
-- ------ -
------ -----------------------
-
-- ------ --- ------------ -
------ ------------------------
------------ -- -------------------------------
------------ -- -----------------------
-
------ ----------------------
------------ -- -------------------------------
------------ -- -----------------------
-
------ -------------------------
-
--------------
------------ -- --------------------
------------ -- ----------------------在上面的示例中，我们定义了一个 Generator 函数 fetchUser，它通过 yield 关键字向调用方请求 token，然后通过 yield 关键字返回用户信息。我们又定义了一个 run 函数，它通过判断 Generator 函数返回的值来实现双向通信，从而完成异步流程控制。
总结
Generator 是一个强大的异步编程工具，它可以让我们更加方便地控制异步流程，提高代码的可读性和可维护性。在使用 Generator 时，我们需要注意一些基本使用和高级技巧，从而更好地发挥它的威力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d42412add4f0e0ffc3241d