前言
在日常前端开发中，我们经常遇到需要处理大量异步代码的情况，例如异步请求数据、多个异步请求并行执行等等。传统的回调函数和 Promise 都可以解决这些问题，但是它们写起来比较复杂，逻辑嵌套深，代码可读性不高，维护性也较差。ES6 中的迭代器和生成器提供了一种更加简洁、可读性更高、维护性更好的方式来处理大量异步代码。
迭代器和生成器简介
迭代器（Iterator）是一种接口，提供了一种方法来访问容器中的元素，同时隐藏了容器内部的实现。在 ES6 中，除了普通对象之外，Array、Map、Set、String、TypedArray 等其他类型的容器都实现了迭代器接口。
生成器（Generator）是一种函数，可以用来生成迭代器。它可以通过函数运行的过程中，用 yield 关键字来表示返回值，同时暂停函数的执行状态，等待下一次调用时继续执行。在 ES6 中，我们可以使用 function* 语法来定义一个生成器函数。
迭代器和生成器的结合使用，可以让我们更加简单、清晰、易读地处理异步代码。
使用迭代器和生成器处理异步代码
使用异步迭代器
ES2018 引入了异步迭代器（Async Iterator）的概念，可以通过异步迭代器处理异步代码。
我们可以通过 Symbol.asyncIterator 来定义一个异步迭代器。它返回了一个对象，对象的 value 属性表示当前指针所指向的值，done 属性表示是否已经迭代完。
具体实现方式：
- 定义一个实现了 [Symbol.asyncIterator] 接口的对象；
- 对象的 next 方法返回一个 Promise，resolve 后返回 value 和 done。
-- -------------------- ---- -------
----- ------------- - -
----- ------------------------- -
----- -------------------------
----- -------------------------
-
--
------ ---------- -
--- ----- ------ - -- -------------- -
---------------
-
-----上面的代码中，我们定义了一个异步迭代器 asyncIterable，它返回了一个 Promise。在 for await 循环中，获取异步迭代器中的值。
我们也可以使用 for-await-of 语法糖来更加简洁地处理异步代码。下面的例子是一个使用异步迭代器来并行处理多个异步请求的例子：
-- -------------------- ---- -------
----- -------- --------------- -
----- -------- - ----- -----------
------ ----- ----------------
-
----- -------- ------------------------- -
----- --- - ------------------------------------
----- -------- - ----- ----------------
------ ----- ---------
-
----- -------- ----------------------- -
--- -
----- ------ ------ - ----- -------------
----------------------------------
---------------------------------------
---
----------------- -------
- ----- --- -
--------------------- -- ------ -------
-
-
----- -------- ------ -
----- ---------------------------------
-
-------在上面的代码中，我们定义了一个 fetchFromGitHub 函数来发起异步请求。在 fetchUserAndRepos 函数中，我们采用 Promise.all，来实现对多个异步请求的并行执行。在 for-await-of 循环中，我们获取到了异步迭代器 asyncIterable 中的每一个值。
使用生成器函数
ES6 的生成器函数提供了一个更加简洁、可读性更高的方式来处理异步代码。
具体实现方式：
- 定义一个生成器函数；
- 在函数内部，我们可以使用 yield 关键字来实现迭代的暂停，并返回值；
- 调用生成器函数时，会返回一个生成器对象；
- 通过生成器对象的 next 方法，可以控制迭代器的迭代。
下面的例子是一个使用生成器函数来处理异步代码的例子：
-- -------------------- ---- ------- --------- ---------- - --- ---- - ----- --------------------- -- ---- -------- --- --- - ----- ----------------------- -------- --- --- --- ------- --- ------- - ----- -------------------- --- ------ ----- ---- ----- -- --- -------- ------ ------- --- ---- -- ------------- - ------ -- -- - ----- --- - ----------- --- --- - ----- ----------- ----------------------- --- - ----- ----------------- ----------------------- --- - ----- ------------- ----------------------- --- - ----- -------------------- ----------------------- -----
在上面的代码中，我们定义了一个生成器函数 greeting 来动态生成问候语，并使用 yield 关键字来实现迭代器的暂停。在 main 函数中，我们调用生成器函数，获取了生成器对象，通过不断调用 next 函数，实现了生成器函数的迭代并获取到了生成器函数中 yield 返回的值。
总结
在本文中，我们简单地介绍了 ES6 中的迭代器和生成器，并演示了使用迭代器和生成器处理异步代码的示例。使用迭代器和生成器来处理异步代码，可以让我们更加简单、清晰、易读地处理异步操作，提高代码的可读性和可维护性。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b144a748841e9894d9712c