在 ES12 中，引入了 for-await-of 循环，以便更方便地处理异步迭代器。本文将详细介绍 for-await-of 循环的使用和特性。
异步迭代器和 Iterable/Iterator
在介绍 for-await-of 循环前，需要先理解异步迭代器和 Iterable/Iterator。
Iterable 和 Iterator 是 ES6 中引入的概念。Iterable 是支持迭代器协议的对象，可以使用 for...of 循环遍历。而 Iterator 是迭代器协议的实现，它定义了返回序列值的方法 next()。next() 方法返回对象，其中包含两个属性：value 和 done。当 done 的值为 true 时，表示序列已枚举完。
跟 Iterator 对应的是异步迭代器（AsyncIterator），它返回的是带有 Promise 的 next() 方法，其中 Promise 返回的是一个包含 value 和 done 属性的对象。异步迭代器本身也是一种 Iterable，可以使用 for await...of 循环枚举。
for-await-of 的基本用法
for-await-of 循环的语法跟 for...of 循环非常相似，代码如下：
async function f() {
const asyncIterable = getAsyncIterable();
for await (const x of asyncIterable) {
console.log(x);
}
}可以看到，唯一的区别是在 for 关键词后面添加了 await。
for-await-of 可以与 Promise.all() 一起使用
for-await-of 循环还可以与 Promise.all() 一起使用，这样便可以同时处理多个异步操作。
const promises = [asyncOperation1(), asyncOperation2(), asyncOperation3()];
for await (const result of Promise.all(promises)) {
console.log(result);
}for-await-of 可以处理迭代器的异常
以往，异步迭代器中遇到异常时只能使用 try-catch 来捕获异常。而 for-await-of 循环可以自动检测到异常，可以像处理同步代码一样处理异常。示例代码如下：
-- -------------------- ---- -------
----- --------- ------------------------ -
----- --
----- --
----- --- ---------------
-
----- -------- --- -
----- ------------- - -------------------------
--- -
--- ----- ------ - -- -------------- -
---------------
-
- ----- --- -
-----------------
-
-在上面的代码中，asyncIterableWithError() 会抛出一个错误。但由于 for-await-of 循环检测到异常并捕获，所以 catch 语句会被执行。
结论
通过本文的介绍，我们了解了 for-await-of 循环的基本使用方法和特性，以及它与 Promise.all() 的搭配使用、异常处理的能力。在实际开发中，for-await-of 循环可以帮助开发人员更方便地处理异步迭代器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66eed1a26fbf9601972ae5cf