在前端应用中，异步编程已经成为了必不可少的技能。尤其是在现代 Web 应用中，我们经常需要执行一些耗时的操作，比如向后端请求数据、渲染复杂的 UI 界面等。为了确保用户体验，我们需要确保这些操作能够以异步的方式执行，避免阻塞主线程。
在过去，我们可能会使用回调和 Promise 等方式来实现异步编程。但是ES7 中引入了一种新的方式，让异步编程更加简单和直观。这就是 Generator 和 yield。
Generator 简介
Generator 是 JavaScript 中一种特殊的函数，它可以在执行过程中暂停，并且可以在稍后的时间点继续执行。在 ES6 中，Generator 已经得到了广泛的应用，因为它能够轻松地实现迭代器。在 ES7 中，Generator 进一步被扩展，可以用于实现异步编程。
Generator 函数的定义方式与普通函数类似，只是在关键字 function 后面添加了一个星号：
function* myGenerator () {
// generator function code
}Generator 函数可以被调用，但是不会立即执行。而是返回一个迭代器（iterator），可以通过指定的方法来获取函数的下一步执行结果和状态。这个方法就是 yield。
yield 关键字
yield 是 Generator 中最重要的关键字之一。当执行到 yield 的时候，Generator 函数会把执行权暂时交给“调用者”，并返回一个值。在下次调用迭代器的时候，Generator 函数会从上次 yield 的位置继续执行。
下面是一个简单的示例：
-- -------------------- ---- ------- --------- ----------- -- - --------------------- ----- ----- --- ---------------------- ----- ----- --- ------------------- - ----- -------- - -------------- ----------------------------- -- - ------ ----- --- ----- ----- - ----------------------------- -- - ------ ----- --- ----- ----- - ----------------------------- -- - ------ ---------- ----- ---- -
在上面的代码中，我们定义了一个带有 yield 的 Generator 函数。当我们在程序中调用这个函数的时候，函数不会执行，而是返回了一个迭代器对象。在下面的代码中，我们调用了两次迭代器的 next() 方法，分别获取了当前 Generator 函数执行的结果。
需要注意的是，每次调用迭代器的 next() 方法的时候，Generator 函数会从上次 yield 的位置继续执行，直到遇到下一个 yield 或者函数结束。
使用 Generator 实现异步编程
使用 Generator 实现异步编程的主要思路是将异步操作封装成一个函数，并在函数中使用 yield 来暂时挂起函数的执行。然后在需要的时候，通过遍历迭代器来恢复函数的执行。
下面是一个通过 Generator 实现异步编程的完整示例：
-- -------------------- ---- -------
-------- -------- ----- -
------ --- ----------------- ------- -- -
----------
-------------- -- ----------------
---------- -- --------------
------------ -- ---------------
---
-
--------- ----------- -- -
--- -
----- -------- - ----- -----------------------------------------
----------------------
----- ------- - ----- --------------------------------------------------------------
---------------------
- ----- --- -
---------------
-
-
----- -------- - --------------
----- --------- - ---------- ----- -- -
----- - ------ ---- - - --------------------
-- ------ -
-------
-
-- ------ ---------- -------- -
----------------- -- -
------------------- --------
-------------- -- -
----------------------
---
- ---- -
------------------- -------
-
--
--------------------在上面的代码中，我们定义了一个名为 fetchApi 的函数，该函数通过 Fetch API 来获取数据（该 API 可以使用 npm install node-fetch 安装）。在 myGenerator 函数中，我们首先获取了 https://api.github.com/users 这个 URL 的数据，并打印出来。接着，我们使用第一次异步操作获取到的数据来获取另一个 URL https://api.github.com/users/${response[0].login} 的详细数据，并打印出来。如果任何一个异步操作发生了错误，我们会调用迭代器的 throw() 方法来通知迭代器。
在代码的最后，我们定义了一个名为 fetchNext 的函数，在函数中调用了迭代器的 next() 方法，并处理了异步操作的结果。如果值是 Promise，则等待异步操作完成，并以该结果执行 fetchNext 函数。否则，我们将结果值作为下一次调用 fetchNext 函数的参数，并恢复函数的执行。
总结
通过本文的介绍，我们了解了 Generator 和 yield 这两个关键字以及使用它们实现异步编程的方法。通过使用 Generator，我们能够轻松地将异步操作封装成一个函数，并通过迭代器来恢复函数的执行。这种方式能够有效地提高代码的可读性和可维护性，避免了 Promise 和回调地狱。
在实际的开发中，我们可以通过这种方式来实现一些复杂的异步操作，比如定时器、服务器请求、动画等等。值得一提的是，Generator 已经成为了 JavaScript 中一个非常有用和流行的编程工具，并且在 Promise、async/await 等方式中也都有应用。因此，我们应该尽可能地学习和熟悉这种编程风格，将其作为我们技术工具箱中的一个有力武器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eee227f6b2d6eab38e17b8