在 JavaScript 中，我们经常需要处理大量异步操作。在上一篇文章中，我们讨论了 Promise 的使用和优化。在本篇文章中，我们将介绍异步迭代器和 for-await-of 循环，它们可以帮助我们更好地处理异步迭代序列。
异步迭代器
异步迭代器是一个迭代器对象，它可以用于遍历异步生成的序列。一个异步生成器函数是一个可以使用 async 和 yield 关键字定义的函数，它会返回一个异步迭代器对象。
以下是一个简单的异步生成器例子：
async function* asyncGenerator() {
yield 1;
yield 2;
yield 3;
}使用异步迭代器访问异步生成的数据是十分方便的。以下是一个使用 for-await-of 循环遍历异步生成器产生的数据的例子：
-- -------------------- ---- -------
----- --------- ---------------- -
----- --
----- --
----- --
-
----- -------- --------- -
----- --------- - -----------------
--- ----- ------ ----- -- ---------- -
-------------------
-
-
---------- -- -- - - -在上面的例子中，我们首先定义了一个异步生成器函数 asyncGenerator，它产生了三个数字。接着，我们使用一个名为 getData 的异步函数来获取这些数字。在 getData 函数的内部，我们创建了一个异步迭代器对象 asyncIter，并使用 for-await-of 循环遍历它。在循环中，我们使用 const value 的方式从迭代器中获取值。
在访问异步生成器中的值时，我们可以像访问同步生成器一样，使用 yield 关键字。我们可以在异步生成器中使用 await 关键字来等待异步操作完成以返回下一个值，如下所示：
async function* asyncGenerator() {
const result1 = await asyncOperation1();
yield result1;
const result2 = await asyncOperation2();
yield result2;
const result3 = await asyncOperation3();
yield result3;
}for-await-of 循环
JavaScript 引入了一个新的循环语法 for-await-of，用于遍历异步迭代器。它类似于 for-of 循环，但可以使用 await 关键字来等待异步操作完成。
以下是使用 for-await-of 循环遍历异步生成器生成的序列的例子：
-- -------------------- ---- -------
----- --------- ---------------- -
----- --
----- --
----- --
-
----- -------- ------------- -
----- --------- - -----------------
--- ----- ------ ----- -- ---------- -
----- ------ - ----- ----------------------
--------------------
-
-
--------------在上面的例子中，我们首先定义了一个异步生成器函数 asyncGenerator，它产生了三个数字。接着，我们使用一个名为 processData 的异步函数来处理这些数字。在 processData 函数的内部，我们创建了一个异步迭代器对象 asyncIter，并使用 for-await-of 循环遍历它。在循环中，我们首先使用 const value 的方式从异步迭代器中获取一个值，然后使用 await 关键字等待异步操作 asyncOperation 的结果，并将结果打印到控制台中。
for-await-of 循环可以与异步生成器一起使用来遍历异步序列。它使得异步编程更加灵活和方便。
结论
异步迭代器和 for-await-of 循环是在处理异步迭代序列时非常有用的工具。它们可以帮助我们更好地管理异步生成序列和遍历它们，并且可以提高代码的可读性和可维护性。当我们需要处理大量异步操作时，这些工具可以极大地简化我们的工作。
在学习使用这些工具时，我们应该注意使用合适的异步函数来确保代码的性能和可靠性，并使用必要的技巧来优化代码的性能。我们应该试图遵循最佳实践，并为代码编写适当的测试来确保代码的正确性和一致性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670caa815f551281025b56a4