前言
ES9 在异步方面的改进中，最主要的特性就是引入了 Async 迭代器和生成器。
对于每一个 JavaScript 程序员来说，理解迭代器和生成器是非常重要的，因为它们是使用 JavaScript 的基础。
在本文中，我们将深入探讨 ES9 中的异步迭代器和生成器，并讲解它们如何改善异步操作的体验。
什么是异步迭代器
在 JavaScript 中，迭代器指的是一种对象，在该对象上定义了一个方法，可以用来遍历数据集合。
异步迭代器与传统迭代器不同的是，它是一个异步过程。
举个例子：
我们可以用传统的 while 循环来遍历一个集合，但是不能在集合加载完成之前完成遍历。
在异步迭代器中，遍历是一个异步过程。也就是说，我们可以在集合加载完成之前就开始遍历。
具体实现如下：
-- -------------------- ---- -------
----- ---- - -
--------
---------
---------
-------
--
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - ------------ -
------ - ------ ---------- ----- ----- --
- ---- -
------ - ----- ---- --
-
-
--
-
--
------ -- -- -
--- ----- ------ ---- -- -------------- -
------------------
-
-----在上面的代码中，我们定义了 asyncIterator 对象，该对象包含一个 [Symbol.asyncIterator] 方法。该方法返回一个对象，该对象具有 next() 方法，next() 方法用于异步遍历集合。
通过 for await... of 循环，我们可以异步遍历集合并打印每个元素。在每次遍历时，可以使用 await 来等待每次异步调用的结束。
什么是异步生成器
虽然异步迭代器可以帮助我们在异步环境中完成迭代操作，但是异步迭代器只能实现一次性遍历。
异步生成器的出现，可以在需要的时候异步获取生成器的下一个值。
与普通的生成器类似，异步生成器是一个函数，使用 async 关键字声明，而且函数中包含关键字 yield。不同的是，它是一个异步操作，且函数名称前面需要加上 async 关键字。
具体实现如下：
async function* asyncGenerator() {
let value = 0;
while (true) {
await new Promise(resolve => setTimeout(resolve, 1000));
yield value++;
}
}在上面的代码中，我们使用了关键字 yield 来返回新的值，并在使用 await 来等待下一个新值的生成。而 await 的作用是等待在 setTimeout 中定义的时间。
使用异步生成器，我们可以轻松地生成有用的、无限的数据，而无需一次性生成所有数据。如果应用程序需要完成一个耗时的任务，那么异步生成器非常适用于这种情境。
(async () => {
for await (const i of asyncGenerator()) {
console.log(i);
}
})();在上面的代码中，我们使用 for await... of 循环来异步遍历生成器的值。这个循环将一直运行，直到满足某个停止条件。
示例代码
我们来实际编写一个使用异步迭代器和生成器的例子。
示例代码将使用迭代器遍历一个集合，同时还使用异步生成器，以实现延迟数据的获取。
-- -------------------- ---- -------
----- --------- ---------------- -
--- ----- - --
----- ------ -
----- --- --------------- -- ------------------- -------
----- --------
-
-
----- -------- ----------- -
----- --- --------------- -- ------------------- -------
------ -
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- -------- --
- --- -- ----- ------- -
--
-
----- --------- --------------- -
----- ----- - ----- ------------
--- ------ ---- -- ------ -
----- --- --------------- -- ------------------- -------
----- -----
-
-
------ -- -- -
--- ----- ------ ---- -- ---------------- -
------------------
--- ----- ------ - -- ----------------- -
---------------
-- -- -- -------- -
------
-
-
-
-----在上面的代码中，我们首先定义了异步生成器 asyncGenerator()，它将每秒产生一个新值，直到驱动程序停止返回。
接下来，我们定义了一个异步函数 loadItems()，该函数延迟 2 秒并返回一个字符串数组。
在异步迭代器 asyncIterator() 中，我们首先加载了数据，然后使用 await 语句等待 1 秒，每次迭代用 yield 返回一个包含每个元素的对象。
最后，我们使用 for await... of 嵌套循环，分别遍历异步迭代器和异步生成器的返回值，并在每次迭代中显示每个元素的信息，并在需要时停止异步生成器的迭代。
总结
ES9 中新增的异步迭代器和生成器的特性，可以让开发人员以异步方式处理集合。这为 JavaScript 编程带来了全新的体验。
通常，我们会使用异步迭代器遍历一个集合，同时使用异步生成器进行延迟加载。同时，这两个特性结合使用时可以编写非常有用和高效的代码。
对于理解和运用 JavaScript 的开发人员来说，掌握和使用异步迭代器和异步生成器是必不可少的。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64767221968c7c53b032ec8f