在传统的 JavaScript 中，通过回调函数实现异步编程时，经常会遇到“回调地狱”的问题，导致代码难以维护和扩展。而在 ES6 中，可以使用 Generator 函数来优雅地解决这个问题。
Generator 函数简介
Generator 函数是 ES6 新增的一种函数类型，它可以在函数执行时暂停和恢复执行，可以用于实现迭代器和异步编程等复杂场景。
生成器函数的语法如下：
function* generator() {
// generator function body
}其中 function* 是定义生成器函数的关键字，generator 是函数的名称。在函数体内，可以使用 yield 关键字来暂停函数的执行，并将结果返回给调用者。
-- -------------------- ---- ------- --------- ----------- - ----- -- ----- -- ----- -- - ----- --- - ------------ ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ ---------- ----- ---- -
上面的示例中，定义了一个生成器函数 generator，并在函数体内使用了三个 yield 关键字来暂停函数的执行，返回相应的值。然后，我们通过 generator() 函数创建了一个生成器对象 gen，并依次调用了它的 next() 方法来恢复函数的执行。
实现异步编程
使用生成器函数来实现异步编程的方法，就是将异步操作封装在 yield 关键字之后的语句中，并返回一个 Promise 对象。然后，使用 Promise 对象的 .then() 方法来处理异步操作的结果，并在回调函数中调用生成器对象的 next() 方法来恢复函数的执行，进而实现异步编程。
下面的示例中，定义了一个异步函数 fetchData()，用于模拟从服务器获取数据。然后我们使用生成器函数 asyncTask() 来实现异步编程，将 fetchData() 函数封装在 yield 关键字之后的语句中，并返回一个 Promise 对象。
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
------------- ---------
-- ------
---
-
--------- ----------- -
----- ------ - ----- ------------
--------------------
-
----- --- - ------------
----- ------- - -----------------
--------------------- -- -
-----------------
---在上面的示例中，我们通过 asyncTask() 函数创建了一个生成器对象 gen，然后调用了它的 next() 方法来恢复函数的执行。在第一次恢复执行时，会执行到 yield 关键字之后的语句，即 fetchData() 函数，返回一个 Promise 对象。
我们可以使用 Promise 对象的 .then() 方法来处理异步操作的结果，当异步操作完成后，回调函数中调用 gen.next(result)，将结果传递给生成器函数，并恢复函数的执行。
使用 co 库简化异步编程
虽然使用生成器函数可以优雅地解决异步编程的问题，但是代码相对复杂，还需要手动处理 Promise 对象的状态和传递操作结果。此时，可以使用 co 库来简化异步编程的代码。
co 库可以将生成器函数包装成一个异步函数，并自动处理 Promise 对象的状态和传递操作结果。使用 co 库的示例代码如下：
-- -------------------- ---- -------
----- -- - --------------
-------- ----------- -
------ --- ----------------- -- -
------------- -- -
------------- ---------
-- ------
---
-
--------- ----------- -
----- ------ - ----- ------------
--------------------
-
--------------在上面的示例中，我们引入了 co 库，并将生成器对象 asyncTask() 作为参数传递给 co() 函数。co 库会自动处理 Promise 对象的状态和传递操作结果，在异步操作完成后，在控制台中输出操作结果。
结论
使用生成器函数可以优雅地解决异步编程时遇到的“回调地狱”问题，并且可以有效地提高代码的可维护性和可扩展性。可以使用 Promise 对象的 .then() 方法和生成器对象的 next() 方法来实现异步编程，也可以使用 co 库来简化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fd21a0447136260178fde3