随着互联网技术的发展，前端开发的复杂度越来越高，异步流程控制成为前端开发中一个重要的环节。在 JavaScript 中，异步编程有很多种方式，而 ECMAScript 2016 中新增的生成器函数，为我们提供了一种非常方便的异步流程控制方式。
生成器函数
生成器函数是 ECMAScript 2015 中引入的一种新的函数类型，通过 function* 来声明。和普通的函数不同的是，生成器函数可以暂停执行，并在需要时重新开始执行，直到生成器函数结束。
以下是一个简单的示例：
-- -------------------- ---- ------- --------- ----------- - ----- -- ----- -- ----- -- - ----- --- - ------------ ------------------------------ ------------------------------ ------------------------------
运行结果：
1 2 3
生成器函数会返回一个迭代器对象，我们可以通过 next() 方法来逐个获取生成器函数中的值，直到结束。
异步流程控制
在异步编程中，我们通常需要处理多个异步操作的结果，然后再做出相应的处理。以读取文件为例，我们读取一个文件时需要等待文件读取完成，然后再做出对应的处理。
传统的解决方案是使用回调函数，但是这种方式会导致多层嵌套，不易阅读和维护。而使用生成器函数就可以非常便捷地实现异步流程控制。我们只需要使用 yield 来暂停生成器函数的执行，然后等待异步操作完成后再继续执行。
以下是一个读取文件的示例：
-- -------------------- ---- -------
----- -- - --------------
-------- ------------------ -
------ --- ----------------- ------- -- -
--------------------- ------- ----- ----- -- -
-- ----- ------------
---- --------------
---
---
-
--------- ----------- -
----- ----- - ----- ----------------------
----- ----- - ----- ----------------------
-------------------
-------------------
-
-------- -------- -
----- ------ - ------
-------- --------- ----- -
-- ----- ------------------
---- -
----- ------ - ------------------
-- ------------- -------
----------------------- --- -- -------------------
-
-
-------
-
---------------在上面的代码中，我们定义了一个 readFile() 函数，该函数返回一个 Promise 对象，用于封装异步读取文件的过程。然后在 readFiles() 中使用 yield 关键字来暂停生成器函数的执行，等待文件读取完成。
最后，我们定义了一个 run() 函数，用于执行生成器函数，并传入一个 next() 函数来继续生成器函数的执行。在 next() 函数中，我们根据结果调用 genObj.next() 或者 genObj.throw()，从而实现异步流程控制。
总结
使用 ECMAScript 2016 的生成器函数实现异步流程控制，可以让我们的代码更加简洁和易读。同时，生成器函数还可以让我们更好地处理异步的错误，提高代码的健壮性。
如果你正在进行前端开发，那么一定需要掌握异步流程控制的技巧，在实际项目中使用生成器函数是一种不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a1fc56add4f0e0ffa109b9