在现代的前端开发中，由于越来越多的应用程序已移入到了浏览器端，JavaScript 语言得以快速发展。ES9 中，新增了一个特性，即 for-await-of 循环，它能够帮助程序员遍历异步迭代器对象中的数据。这篇文章将为大家详解该特性，以及如何在实践中应用。
异步迭代器对象以及它们的作用
异步迭代器对象是一个返回一个 Promise 对象的迭代器对象。 迭代器对象允许开发人员在不等到前一个异步操作完成的情况下进行下一个异步操作。异步迭代器现在已经被集成到 JavaScript 语言中，并在许多地方得到了广泛的运用。这种新特性允许开发人员通过一个循环语句遍历异步迭代器对象。
例如，如果您需要从一个 API 中获取一些数据，可能会使用异步函数进行操作，从而允许程序在等待数据返回的同时执行其他任务。异步迭代器则使得在获得数据后快速高效地进行操作成为可能。因此，使用异步迭代器对象可以提高程序的性能，并极大地优化整个编程流程。
for-await-of 循环的工作原理
for-await-of 循环是 ES9 中引入的一种全新的循环语句。它能够遍历异步迭代器对象，并且可以通过 await 操作符直接在循环体内部执行 Promise 对象。for-await-of 循环的语法如下：
for await (variable of asyncIterable) {
// ...
}其中 variable 表示对迭代器对象返回的一个值的引用，而 asyncIterable 则表示异步迭代器对象的引用。整个循环体是一个 async 函数，这意味着可以在循环体内部使用 await 操作符。
for-await-of 循环的示例代码
以下代码展示了一个基于 for-await-of 循环的示例。它通过异步迭代器对象遍历了一个 URL 字符串数组，向每个 URL 发出了一个 HTTP 请求，并在请求成功后将响应输出到控制台中：
-- -------------------- ---- -------
----- -------- --------------- -
--- ----- ------ --- -- ----- -
----- -------- - ----- -----------
----------------- -----------------
-
-
----- ---- - -
------------------------------------
------------------------------------
-----------------------------------
--
----------------上述代码中，我们使用 fetch() 函数来发送请求，并使用 await 操作符等待响应返回。值得注意的是，对于迭代器对象返回的每个值，都会执行一次循环体。因此，在上面的代码中，fetchUrls() 函数会遍历整个 URL 列表，并为每个 URL 发送一个异步请求。
总结
在本文中，我们探索了一个很实用的 ES9 特性：for-await-of 循环。该特性使得在异步迭代器对象中遍历数据变得极其便捷。本文还提供了一些实际的代码示例展示如何使用 for-await-of 循环，以及如何通过 Promise 对象实现异步调用。请注意，在使用 for-await-of 循环时，需要谨慎使用 await 操作符，以确保代码可以在性能方面得到最大的优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6487e0d948841e989466b920