ES6 引入了 Generator 函数，可以通过控制异步流程、解决同步异步问题等，具有很强的实用性。本文将详细介绍 ES6 中 Generator 函数的异步流控制及解决同步异步问题的应用，以及通过示例代码演示其使用。
Generator 函数的基本介绍
Generator 函数是一个普通函数的变体，通过 function* 定义。特点如下：
- 在函数名和函数体之间有一个星号
*； - 在生成器函数内部，可以用关键字
yield暂停代码执行，并返回一个值； - 如果一个函数中包含了
yield关键字，那么调用该函数时并不会立即执行函数体。而是返回一个指向该函数内部状态的迭代器对象。
以下是一个简单的 Generator 函数示例：
-- -------------------- ---- ------- --------- ---------------- - ----- -------- ----- -------- ------ ------ - ----- -- - ----------------- ----------------------- ----------------------- -----------------------
运行结果：
{ value: 'hello', done: false }
{ value: 'world', done: false }
{ value: 'end', done: true }首先，我们定义了一个 helloGenerator() 函数，它包含了两个 yield 关键字和一个 return 关键字。然后，我们在函数体内通过 yield 暂停代码执行，并返回字符串。最后，我们将函数体内部状态的迭代器对象赋值给了 hw 变量。
调用 hw.next() 方法后，console 分别输出 {value: 'hello', done: false}，{value: 'world', done: false}、{value: 'end', done: true}。其中，done 表示代码是否执行完毕，value 表示代码执行结果。
Generator 函数的异步流控制
Generator 函数内部可以通过 yield 暂停代码执行，并返回一个值。这种机制可以用于异步流控制。以下是一个把异步读取文件完成后的数据返回的示例：
-- -------------------- ---- -------
----- -- - --------------
-------- ------------------------- -
------ --- ------------------------- ------- -
--------------------- --------------- ----- -
-- ------- --------------
--------------
---
---
-
--------- -------------- -
----- ----- - ----- --------------------------------
----- ----- - ----- --------------------------------
----- ----- - ----- --------------------------------
--------------------------------------------
-
----- -------- - ---------------
----------------------------------- -- -
----------------------------------------- -- -
----------------------------------------- -- -
----------------------
---
---
---首先，我们通过 readFilePromise() 函数生成一个读取文件的 Promise 对象。然后，我们通过 readFileFlow() 定义了一个循序读取文件的流程。
在流程中，我们通过 yield 暂停代码执行，等待读取文件完成。读取完成后，我们把文件内容作为参数传递给下一个 yield，依次完成读取文件的流程，最后输出文件内容。
在执行流程时，我们首先生成了迭代器对象 readFlow；然后，调用 readFlow.next().value.then(...) 方法，在异步读取完第一个文件后继续执行，接着在读取完第二个文件后继续执行，直到读取并输出完所有的文件内容。
这种机制可以控制异步流程，而不用一层层套回调函数，增加代码可读性和可维护性。
Generator 函数的同步异步问题
在处理一个异步请求时，我们往往需要等待请求完成后才能继续执行，而在这个过程中，程序往往会阻塞其他请求，导致程序的响应能力下降。
Generator 函数可以通过使用 yield 和 Promise，控制异步流程，解决同步异步问题，增加程序的响应能力。以下是一个通过 Generator 函数实现了流程控制，实现 XMLHttpRequest 同步请求的示例：
-- -------------------- ---- -------
-------- --------- ------- -
--- --- - --- -----------------
---------------- ---- ------
------ --- ------------------------- ------- -
---------------------- - ---------- -
-- ---------------- --- - -- ----------- --- ---- -
-----------------------
-
-- ---------------- --- - -- ----------- --- ---- -
-------------
-
--
-----------
---
-
--------- -------------- -
----- --- - ----- --------- -------
-----------------
-
----- ---- - ----------------------------------------------------------
------------------------------ -- -
-----------------
---------------- -- -
----------------- -------- -------
---在上述代码中，我们定义了一个 ajax() 方法，用于发送 XMLHttpRequest 请求，并返回一个 Promise 。然后，我们通过 fetchPage() 方法定义了一个同步请求获取数据的流程，该方法中包含了 yield 关键字，用于在异步数据请求完成时恢复流程。
我们通过 fetchPage('https://jsonplaceholder.typicode.com/todos/1') 执行流程，并在每个 yield 停止流程，等待异步数据请求完成。然后，我们可以通过迭代器的方式依次获取到请求完成后的数据，并处理它。
在请求完成后，我们通过 then() 方法与 catch() 方法来处理异步请求完成和请求失败的情况，保证程序的正确性和可靠性。
总结
Generator 函数在异步流控制和同步异步问题解决方面，具有很强的应用性。我们可以借助 yield 和 Promise，通过暂停代码的执行，使异步请求的执行按照指定流程进行，并且不会阻塞其他请求。同时，结合迭代器的方式，可以让代码更优美、易读易维护。希望通过本文的介绍和示例能够让读者了解到 Generator 函数的用途和应用，进一步巩固 JS 编程基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518189095b1f8cacd057cff