JavaScript 是一门单线程编程语言，异步编程是其重要特性。在异步编程中需要大量使用回调函数，然而回调函数嵌套过多导致出现回调地狱，程序可读性和可维护性变差。针对这一问题，ECMAScript 2015（ES6）引入了 Promise，使得异步编程变得更加优雅。但是，Promise 仍然存在一些问题，例如无法取消、无法暂停等。ES2018 引入了 async/await，使得异步编程更加简单，但是 async/await 本质上还是 Promise 的语法糖。在 ECMAScript 2021 中，新增了 Generator 的功能，解决了异步编程中存在的困扰，下面就来详细介绍一下。
Generator 简介
Generator 是一种特殊的函数，它不仅能返回一个值，还能暂停函数的执行状态并在需要时恢复执行。调用 Generator 函数后，它将返回一个可迭代对象（Iterable Object），也就是一个以 Generator 函数为源的迭代器。
Generator 函数的定义语法与普通函数非常相似，只是在函数名前加上*。
function* myGenerator() {
// ...
}Generator 函数使用关键字 yield 来暂停函数的执行，并返回已经执行的结果。调用方可以通过 Iterator 对象的 next() 方法恢复执行，并传递一个参数给 yield，该参数作为 yield 的返回值。
-- -------------------- ---- ------- --------- ------------- - ----- -- ----- -- ----- -- - ----- -------- - -------------- ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ ---------- ----- ---- -
Generator 迭代器的特点是，每次执行 next() 方法都会从上次暂停的位置开始执行，直到遇到下一个 yield 或 return 语句。
Generator 实现异步编程
Generator 函数的特殊之处就在于可以暂停和恢复运行状态，因此可以使用它来实现异步编程。通过配合使用 Generator 函数和 yield 语句，可以使得异步编程代码的可读性和可维护性大大提高。
下面是一个简单的示例代码，通过使用 Generator 函数实现一个异步的数据加载过程。
-- -------------------- ---- -------
--------- ---------- -
----- ----- - ----- ------------------------
----- ----- - ----- ------------------------
----- ----- - ----- ------------------------
------ ------- ------ -------
-
----- -------- - -----------
------------------------------- -- -
----------------------------------- -- -
----------------------------------- -- -
---------------------------------------
---
---
---可以看到，使用 Generator 函数和 yield 语句，可以使得异步编程的代码结构更清晰、更易读、更容易维护。但是，上面的代码存在嵌套层数过多的问题，并不优美。
下面，通过使用 co 模块（一个用于 Generator 函数自动执行的库），来简化上面的代码。
-- -------------------- ---- ------- ----- -- - -------------- --------- ---------- - ----- ----- - ----- ------------------------ ----- ----- - ----- ------------------------ ----- ----- - ----- ------------------------ ------ ------- ------ ------- - ------------------------ -- - ------------------ ---
使用 co 模块可以避免嵌套层数过多的问题，让代码结构更加优美。
Generator 实现异步控制流
除了能够实现异步编程的代码结构清晰，Generator 还有一个重要的应用场景，就是控制异步代码的执行顺序。
下面是一个简单的示例代码，通过使用 Generator 函数和 yield 语句，实现了一个异步流程的简单控制。
-- -------------------- ---- -------
--------- ----------- -
----- ----- - ----- -------------
----- ----- - ----- ------------------
----- ----- - ----- ----------------- -------
------ ------
-
-------- ------------ -
------ --- --------------- -- -
------------- -- ----------------- ------
---
-
-------- ---------------- -
------ --- --------------- -- -
------------- -- ------------------------- ------
---
-
-------- ----------------- ------ -
------ --- --------------- -- -
------------- -- ----------------------------------- ------
---
-
----- --------- - ------------
-------- ----------- -
----- ------ - ----------------------
-- ------------- -
--------------------------
-------
-
------------------------
-
-------在上面的代码中，通过手动调用 next() 函数，每次执行下一个异步任务，从而达到控制异步代码执行顺序的效果。
总结
Generator 是 ECMAScript 2021 中新增的一个重要功能，它提供了一种优雅的方式来解决 JavaScript 中异步编程的困扰。通过使用 Generator 函数和 yield 语句，可以使得异步编程的代码结构更加清晰、更易读、更容易维护。此外，Generator 还可以用于控制异步代码的执行顺序，使得异步编程更加精细、更灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eedf70f6b2d6eab38d7411