介绍
在传统的 JavaScript 编程中，处理异步流程一直是一个棘手的问题。在 ES2017 中引入了 async/await 来处理异步操作，但是这种方式也存在一些问题，尤其是在处理大量数据的异步操作方面。
ES2019 引入了异步迭代器，这是一个非常强大的新功能，它可以帮助我们更加优雅地处理异步控制流。
在本文中，我们将深入了解异步迭代器是什么，以及它如何帮助我们更好地处理异步流程。
异步迭代器是什么
异步迭代器是一个返回异步迭代对象的对象。我们可以通过在对象中编写一个异步生成器函数来创建异步迭代器。
异步生成器函数是一个使用 async 关键字定义的生成器函数。它会返回一个具有一个异步 next() 方法的迭代器对象。这个 next() 方法会返回一个 Promise。
通过异步迭代器，我们可以遍历一个庞大的异步数据流，而不必等待整个数据集加载完成。
简单示例
要创建异步迭代器，我们需要编写一个异步生成器函数。
下面是一个包含两个异步数字的数组的异步生成器。
const asyncIterable = {
async *[Symbol.asyncIterator]() {
yield await Promise.resolve(1);
yield await Promise.resolve(2);
}
};我们将这个异步迭代器赋值给变量 asyncIterable。
我们可以使用 for-await-of 循环来遍历这个异步迭代器。
(async function () {
for await (const num of asyncIterable) {
console.log(num);
}
})();在控制台中，你将看到输出结果为 1 和 2。
更复杂的示例
异步迭代器最常用的情况是处理大量的异步数据。让我们来看一个复杂一点的例子。
-- -------------------- ---- -------
----- -------- ------------- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
-
----- --------- ------------------------------- -
--- ------ --- -- --------- -
----- ---- - ----- --------------
----- -----
-
-这是一个使用异步迭代器从多个 URL 中加载数据的示例。
异步生成器函数 getDataAsynchronously 接收一个包含 URL 数组的参数，它会遍历这个数组并使用 loadData 函数加载数据。在每个数据加载完成后，该函数会 yield 出一个数据，并继续向下遍历数组。
我们可以使用 for-await-of 循环来遍历 getDataAsynchronously 函数返回的异步迭代器。
-- -------------------- ---- -------
------ -------- -- -
----- -------- - -
-----------------------------------------------
-----------------------------------------------
-----------------------------------------------
-
--- ----- ------ ---- -- -------------------------------- -
------------------
-
-----在控制台中，你将看到输出结果为这些 URL 返回的数据。
结论
异步迭代器是一个非常有用的功能，它为我们提供了一种优雅的方式来处理异步流程。通过它，我们可以处理大量的数据而不必等待所有的数据都被加载完成。
在设计异步迭代器时，我们需要编写一个异步生成器函数，并将它分配给一个对象，这个对象就成为了我们的异步迭代器。我们可以使用 for-await-of 循环来遍历这个异步迭代器，这是一个非常好用的功能。
总的来说，异步迭代器是一种非常有意义并且很有用的功能，值得开发者们深入掌握和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b71f0d91dce0dc88aa416