在过去的几年中，异步编程已经成为前端领域中一个非常重要的话题。异步编程解决了一些在同步环境中无法解决的问题，例如保持 UI 的响应性和避免长时间阻塞，但这样的代码通常会比同步代码复杂得多。ES6 中的 Promise 和 async/await 两个新特性大大减轻了异步编程的复杂性，而 ECMAScript 2018 中引入的异步生成器和异步迭代器则更进一步地方便了我们处理异步操作。
异步生成器
在 JavaScript 中，生成器是一个返回 iterator 对象的函数。使用 yield 关键字，生成器函数可以生成一系列值，每次生成的值可以通过迭代器进行访问。在 ES6 当中，生成器只能生成同步的值，而在 ECMAScript 2018 中，可以支持异步的生成操作。
异步生成器的语法和普通的生成器类似，只需要在函数前面添加一个 async 关键字即可。下面是一个简单的异步生成器的示例：
async function* asyncGenerator() {
let i = 0;
while (true) {
await new Promise(resolve => setTimeout(resolve, 1000));
yield i++;
}
}这个异步生成器通过 yield 关键字生成一系列的数字，每次生成数字之前都会等待一秒钟。这个过程是异步的，因此用 async 关键字定义生成器函数。
使用异步生成器可以方便地处理一些异步操作，例如文件读取、网络请求等。下面演示如何读取一个文件的内容：
-- -------------------- ---- -------
-- ------
----- --------- ------------------------- -
----- ---- - ----- ------------------------
----- ----- - ----------------
--- ------ ---- -- ------ -
----- -----
-
-
-- -----------
--- ----- ------ ---- -- ------------------------------------- -
------------------
-这个代码片段中，我们定义了一个异步生成器 readFileContent，用于读取文件的内容。当我们需要遍历文件的每一行时，可以使用 for await...of 循环来遍历生成器。
异步迭代器
异步迭代器是一种可以迭代异步生成器所生成的序列的迭代器。与同步迭代器不同的是，在异步迭代器中，每次迭代都是以异步方式进行的。异步迭代器的本质是一个返回一个 promise 的对象，promise resolve 时返回一个包含 value 和 done 属性的对象。
下面是一个异步迭代器的示例代码：
-- -------------------- ---- -------
----- ------------- - -
----- ------------------------- -
----- --
----- --
----- --
-
--
------ ---------- -
--- ----- ------ --- -- -------------- -
-----------------
-
-----这个示例代码中，我们定义了一个包含三个数字的异步迭代器。异步迭代器通常是通过一个内置的异步迭代器方法 [Symbol.asyncIterator]() 实现的，这个方法返回一个 generator 对象，在这个 Gnerator 对象里面可以通过 yield 生成各种异步的东西。
总结
通过 ECMAScript 2018 中的异步生成器和异步迭代器，我们可以非常方便地处理异步操作。异步生成器允许我们以异步方式生成值，异步迭代器则允许我们异步地迭代这些值。通过这些新特性，我们可以更加方便地处理一些异步操作，使我们的代码更加简洁、高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64603659968c7c53b01f8748