背景
在以往的 JavaScript 版本中，我们经常使用回调函数来处理异步操作。但是这种方式带来的问题是回调嵌套过多，导致代码可读性差，难以维护。ES6 引入了 Promise 对象，让异步处理变得更加优雅。但是 Promise 也有一些限制，例如不能取消、不能暂停等。在 ES9 中，JavaScript 增加了异步生成器函数，它是异步操作的有力工具。
异步生成器函数
异步生成器函数是一种可暂停、可恢复、可异步执行的函数。在使用异步生成器函数时，我们可以在代码中使用 await 关键字来等待异步操作的结果。例如：
async function fetchData() {
const data = await fetch("https://example.com");
return data;
}上述代码通过 await 等待 fetch 方法的结果，来获得异步请求的数据。但是在某些情况下，我们需要多次异步操作，例如从服务器端获取一系列数据。这时候我们可以使用异步生成器函数。
异步生成器函数的语法和普通生成器函数非常相似，只是在函数前面加了 async 关键字。另外，异步生成器函数使用 yield 关键字来暂停执行并返回一个值。
下面是一个简单的异步生成器函数的示例：
async function fetchAllData(urls) {
for (const url of urls) {
const data = await fetch(url);
yield data;
}
}上述代码定义了一个异步生成器函数 fetchAllData，它接收一个数组作为参数，并使用 for of 循环遍历这个数组。在每次循环中，它通过 await 等待 fetch 方法的结果，并使用 yield 关键字返回这个结果。
使用异步生成器函数处理异步数据
使用异步生成器函数处理异步数据有两种方式：for-await-of 循环和手动迭代。
for-await-of 循环
在 ES9 中，我们可以使用 for-await-of 循环来遍历异步生成器函数的结果。例如：
-- -------------------- ---- -------
----- -------- ------------------ -
--- ------ --- -- ----- -
----- ---- - ----- -----------
----- -----
-
-
------ ---------- -
----- ---- - -
----------------------------
----------------------------
---------------------------
--
--- ----- ------ ---- -- ------------------- -
------------------
-
-----上述代码中，我们定义了一个异步生成器函数 fetchAllData，它接收一个数组作为参数，并使用 for of 循环遍历这个数组。在每次循环中，它通过 await 等待 fetch 方法的结果，并使用 yield 关键字返回这个结果。
在主程序中，我们使用 for-await-of 循环来遍历 fetchAllData 的结果，并打印每个数据。
手动迭代
除了使用 for-await-of 循环，我们也可以手动迭代异步生成器函数的结果。例如：
-- -------------------- ---- -------
----- -------- ------------------ -
--- ------ --- -- ----- -
----- ---- - ----- -----------
----- -----
-
-
------ ---------- -
----- ---- - -
----------------------------
----------------------------
---------------------------
--
----- --------- - -------------------
--- ------ - -----------------
----- -------------- -
--------------------------
------ - ----- -----------------
-
-----上述代码中，我们定义了一个异步生成器函数 fetchAllData，它接收一个数组作为参数，并使用 for of 循环遍历这个数组。在每次循环中，它通过 await 等待 fetch 方法的结果，并使用 yield 关键字返回这个结果。
在主程序中，我们手动迭代 fetchAllData 的结果。首先我们创建一个异步生成器对象，然后使用 generator.next() 方法获取第一个结果。我们在一个 while 循环中，不断调用 generator.next() 方法，直到 done 属性为 true。在循环过程中，我们使用 await 等待异步操作的结果，并打印每个数据。
结论
异步生成器函数是一个强大、灵活的工具，它可以帮助我们更好地处理异步操作。通过 for-await-of 循环或手动迭代，我们可以很容易地获取异步操作的结果，并对这些结果进行处理。
示例代码
-- -------------------- ---- -------
----- -------- ------------------ -
--- ------ --- -- ----- -
----- ---- - ----- -----------
----- -----
-
-
------ ---------- -
----- ---- - -
----------------------------
----------------------------
---------------------------
--
-- ------------ --
--- ----- ------ ---- -- ------------------- -
------------------
-
-- ----
----- --------- - -------------------
--- ------ - -----------------
----- -------------- -
--------------------------
------ - ----- -----------------
-
-----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee56a26fbf960197215ea8