前言
在 JavaScript 中，生成器是一种特殊的函数，它可以在执行过程中暂停并回传一个值，然后再从暂停的位置继续执行。ES9 中新增的生成器组合器语法，可以让我们更方便地组合生成器函数，实现更复杂的异步流程控制。
本文将介绍 ES9 生成器组合器的基本用法和实战应用，以及一些细节心得，希望能够帮助大家更好地理解和应用这一语法。
基本用法
ES9 中新增的生成器组合器语法，使用 yield* 关键字来调用另一个生成器函数，将生成器函数的控制权转移给另一个生成器函数，直到另一个生成器函数执行完毕或者遇到 return 语句，才会返回控制权。
下面是一个简单的示例代码，演示了如何使用生成器组合器来调用两个生成器函数：
-- -------------------- ---- ------- --------- ------------ - ----- ----- ----- ----- ----- ----- - --------- ------------ - ----- ----- ----- ----- ----- ----- - --------- ------------ - ------ ------------- ------ ------------- - ----- --------- - ------------- ------------------------------ -- - ------ ----- ----- ----- - ------------------------------ -- - ------ ----- ----- ----- - ------------------------------ -- - ------ ----- ----- ----- - ------------------------------ -- - ------ ----- ----- ----- - ------------------------------ -- - ------ ----- ----- ----- - ------------------------------ -- - ------ ----- ----- ----- - ------------------------------ -- - ------ ---------- ----- ---- -展开代码
在上面的示例代码中，我们定义了三个生成器函数 generatorA、generatorB 和 generatorC，其中 generatorC 使用 yield* 关键字来调用 generatorA 和 generatorB，将它们的值依次返回。
最后，我们创建了一个 generator 实例，并依次调用 next 方法，输出了所有的值。
实战应用
在实际开发中，我们可以使用生成器组合器来组合多个异步操作，实现更复杂的异步流程控制。
下面是一个示例代码，演示了如何使用生成器组合器来实现一个异步操作流程，依次执行两个异步函数，并在两个异步函数执行完毕后输出结果：
-- -------------------- ---- ------- -------- --------------- - ------ --- --------------- -- ------------------- ----------- - ----- -------- ---------------- - ----- ------------ ------ ---- - ----- -------- ---------------- - ----- ------------ ------ ---- - --------- ----------- - ----- ------- - ----- ----------------- ----- ------- - ----- ----------------- ------ --------- --------- - -------- -------------- - ----- -------- - ------------ -------- ----------- - ----- ---- - --------------------- -- ----------- - ------ ---------------------------- - ------ --------------------------------------- - ------ ------- - -------------------------- -- - -------------------- -- ----- ---- ---展开代码
在上面的示例代码中，我们定义了两个异步函数 asyncFunctionA 和 asyncFunctionB，它们都返回一个 Promise 对象，表示异步操作的结果。然后，我们定义了一个生成器函数 generator，它依次调用了 asyncFunctionA 和 asyncFunctionB。
最后，我们定义了一个 run 函数，它接受一个生成器函数作为参数，并递归调用生成器函数，直到生成器函数执行完毕。在递归调用过程中，我们使用 Promise 对象来处理异步操作的结果，并传递给下一个生成器函数。
细节心得
在使用生成器组合器的过程中，需要注意一些细节问题，以确保代码的正确性和可读性。
1. 错误处理
在异步操作中，可能会出现一些错误，需要对这些错误进行处理。如果使用 Promise 对象进行异步操作，可以使用 catch 方法来捕获错误。但是，在使用生成器组合器时，需要注意将错误传递给生成器函数的调用者。
下面是一个示例代码，演示了如何在生成器函数中处理错误：
-- -------------------- ---- ------- ----- -------- ---------------- - ----- ------------ ----- --- ------------ -- ----------------- - ----- -------- ---------------- - ----- ------------ ------ ---- - --------- ----------- - --- - ----- ------- - ----- ----------------- - ----- ------- - ------ ------ - ----- ------- - ----- ----------------- ------ --------- --------- - -------- -------------- - ----- -------- - ------------ -------- ----------- - --- ----- --- - ---- - --------------------- - ----- ------- - ------ ---------------------- - -- ----------- - ------ ---------------------------- - ------ -------------------------------------------------- -- - ---------------------- --- - ------ ------- - -------------------------- -- - -------------------- -- ------ ----- -- -------------- ---展开代码
在上面的示例代码中，我们在 asyncFunctionA 中抛出了一个错误，然后在生成器函数 generator 中使用 try...catch 语句来捕获错误。如果捕获到错误，我们将错误直接返回给调用者。
在 run 函数中，我们在调用 iterator.next 方法时，使用 try...catch 语句来捕获错误。如果捕获到错误，我们将错误直接抛出。在递归调用过程中，如果捕获到错误，我们使用 iterator.throw 方法来将错误传递给生成器函数的调用者。
2. 生成器函数的返回值
在生成器函数中，可以使用 return 语句来返回一个值。但是，在使用生成器组合器时，需要注意生成器函数的返回值是由生成器函数的调用者返回的，而不是由生成器函数本身返回的。
下面是一个示例代码，演示了生成器函数的返回值是由生成器函数的调用者返回的：
-- -------------------- ---- ------- --------- ------------ - ----- ----- ----- ----- ----- ----- - --------- ------------ - ----- ----- ----- ----- ----- ----- ------ ----- - --------- ------------ - ------ ------------- ----- ------- - ------ ------------- ----- -------- - ----- --------- - ------------- ------------------------------ -- - ------ ----- ----- ----- - ------------------------------ -- - ------ ----- ----- ----- - ------------------------------ -- - ------ ----- ----- ----- - ------------------------------ -- - ------ ----- ----- ----- - ------------------------------ -- - ------ ----- ----- ----- - ------------------------------ -- - ------ ----- ----- ----- - ------------------------------ -- - ------ ----- ----- ----- - ------------------------------ -- - ------ ---------- ----- ---- -展开代码
在上面的示例代码中，我们定义了三个生成器函数 generatorA、generatorB 和 generatorC，其中 generatorB 使用 return 语句返回了一个值。在 generatorC 中，我们使用 yield* 关键字来调用 generatorA 和 generatorB，然后使用 yield 关键字将 generatorB 的返回值返回给调用者。
在调用 generator.next 方法时，我们可以看到 generatorB 的返回值是由生成器函数的调用者返回的，而不是由 generatorB 本身返回的。
总结
ES9 生成器组合器语法是一种非常强大的语法，可以让我们更方便地组合生成器函数，实现更复杂的异步流程控制。在使用生成器组合器时，需要注意错误处理和生成器函数的返回值，以确保代码的正确性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658dbb6feb4cecbf2d3b0148
