JavaScript 是一门基于事件驱动的脚本语言，它能够在浏览器中创建交互式的 Web 页面，并且现在也能在 Node.js 等平台上运行。然而，JavaScript 在执行异步任务时会出现一些问题。在早期版本的 ECMAScript 中，我们使用了回调函数、Promises 和 async/await 等方法来解决这些问题。但是在 ECMAScript 2017 中，我们可以使用 Generator 函数来让 JavaScript 做到异步调用。
Generator 函数
Generator 函数是 ECMAScript 2015 中引入的一个新特性。它可以让我们生成一个可遍历的函数对象，通过指定函数体中的 yield 来控制程序的执行流程。Generator 函数的定义方式和普通函数类似，只需要在函数名之前加上一个 * 即可。
例如，我们可以定义一个 Generator 函数来生成一个数列：
-- -------------------- ---- -------
--------- ------------ ---- -
--- ---- - - ------ - -- ---- ---- -
----- --
-
-
----- - - -------- ---
--- ---- - -- -- -
--------------- -- -- -- -- -- -
-在上面的代码中，我们定义了一个 range 的 Generator 函数。使用该函数生成了一个数列，并将其存储在一个对象中。然后我们使用 for...of 循环遍历该对象，输出了数列中的所有元素。
Generator 函数与异步调用
Generator 函数的真正威力在于它可以通过 yield 关键字让程序在某些地方停下来，等待后续操作完成后再继续执行。因此，我们可以通过 Generator 函数来解决 JavaScript 中的异步调用问题。
在传统的模式下，我们通常会使用回调函数来执行异步调用。例如，假设我们要从后端服务器中获取一些数据：
function getData(callback) {
fetch('https://example.com/data')
.then(res => res.json())
.then(data => callback(data))
.catch(error => console.error(error));
}
getData(data => console.log(data));在上面的代码中，我们定义了一个 getData 函数，用于从服务器获取数据。我们使用 fetch 函数来向服务器发出 HTTP 请求，然后通过 JSON 解析返回的响应数据。在解析完成后，我们使用回调函数来将数据传递给后续处理函数。这种方式虽然能够解决异步调用的问题，但是代码风格不够优雅，并且容易出现回调地狱的问题。
在使用 Generator 函数的方式下，我们可以将上述代码改写为：
-- -------------------- ---- -------
--------- --------- -
----- --- - ----- ----------------------------------
----- ---- - ----- -----------
------ -----
-
-------- -------------- -
----- -------- - ------------
-------- ------------------ -
-- ---------------- -------
----- ------- - ----------------
---------------- -- ----------------------------
------------ -- -----------------------
-
-------------------------
-
---------------------- -- -------------------在上面的代码中，我们定义了一个 Generator 函数 getData，在该函数中使用了 yield 关键字来停止程序的执行流程。我们定义了一个 run 函数，用来执行 Generator 函数。该函数会生成一个可遍历的迭代器对象，并反复执行直至所有的 Generator 函数都已经执行完成。
通过上述方式，我们能够解决 JavaScript 中的异步调用问题，代码风格更加优雅，可读性也更强。
总结
通过本文的介绍，我们了解了在 ECMAScript 2017 中如何使用 Generator 函数来解决 JavaScript 中的异步调用问题。通过使用 yield 关键字和遍历器对象，我们能够让程序根据我们的控制在某些地方暂停，等待后续操作完成后再继续执行。这种方式可以避免 Callback Hell 的问题，并且能够让我们的代码更加易读易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae6ded48841e9894a7bb58