随着 JavaScript 的不断发展，异步编程已经成为了前端开发中不可或缺的一部分。在 ES6 中，引入了生成器函数和迭代器，使得异步编程变得更加直观和易于理解。而在 ES12 中，又引入了异步迭代器和生成器，进一步简化了异步编程的复杂性。
什么是异步迭代器？
异步迭代器是一种特殊类型的迭代器，它可以迭代异步操作的结果。与同步迭代器不同的是，异步迭代器返回的是一个 Promise 对象，而不是一个值。这意味着我们可以使用 async/await 来处理异步操作的结果。
异步迭代器的形式如下：
----- --------- ------------------ - -- ---- ----- ------ -
这里需要注意的是，异步迭代器必须是一个异步生成器函数，即函数前面需要加上 async 关键字。
什么是生成器？
在介绍异步生成器之前，我们先来回顾一下生成器的概念。生成器是一种特殊类型的函数，它可以在函数执行过程中暂停，并且可以恢复到之前的状态。这使得我们可以通过生成器来实现一些复杂的逻辑，例如迭代器和协程。
生成器的形式如下：
--------- ------------- - -- ------ ----- ------ -- ------ -
生成器函数中的 yield 关键字用于暂停函数的执行，并将一个值返回给调用者。当生成器函数再次被调用时，它会从上一次暂停的地方恢复执行，并继续执行下去。
什么是异步生成器？
异步生成器是一种结合了异步操作和生成器的特性的函数。它可以在执行异步操作的同时暂停函数的执行，并在异步操作完成后恢复执行。异步生成器可以通过异步迭代器来迭代异步操作的结果。
异步生成器的形式如下：
----- --------- ------------------ - -- ---- ----- ------ -
这里需要注意的是，异步生成器必须是一个异步函数，并且函数前面需要加上 async 关键字。在异步生成器中，我们可以使用 await 关键字来等待异步操作的完成，并在异步操作完成后继续执行。
如何使用异步迭代器和生成器？
在使用异步迭代器和生成器之前，我们需要先了解一下 for-await-of 循环。for-await-of 循环可以用来迭代异步迭代器的结果，并且可以使用 async/await 来处理异步操作的结果。
for-await-of 循环的形式如下：
--- ----- ------ ----- -- ------------------- - -- --------- -
在 for-await-of 循环中，我们使用 const value 来接收异步迭代器返回的 Promise 对象，并使用 async/await 来处理异步操作的结果。
下面是一个简单的示例，展示了如何使用异步生成器和异步迭代器来处理异步操作的结果：
----- --------- --------------- -
--- ------ --- -- ----- -
----- -------- - ----- -----------
----- ----- ----------------
-
-
----- -------- ------ -
----- ---- - ---------------------------------------- ----------------------------------------
--- ----- ------ ---- -- ---------------- -
------------------
-
-
-------在上面的示例中，我们定义了一个异步生成器函数 fetchUrls，它可以迭代一个 URL 数组，并使用 fetch 函数来获取每个 URL 对应的 JSON 数据。在 main 函数中，我们使用 for-await-of 循环来迭代异步生成器返回的 Promise 对象，并使用 async/await 来处理异步操作的结果。
总结
异步迭代器和生成器是 ES12 中新增的功能，它们可以使异步编程变得更加直观和易于理解。在实际开发中，我们可以使用异步迭代器和生成器来处理异步操作的结果，并且可以使用 async/await 来简化异步编程的复杂性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660e7c91d10417a222f031f0