ES9（ECMAScript 2018）是 JavaScript 的最新标准，其中引入了一个新的语法特性：for-await 循环。该循环结合了 for...of 循环和 async/await，使得在异步操作中迭代数据变得更加方便和简单。本文将深入探讨 for-await 循环的原理、用法和示例。
for-await 循环的原理
在 ES6 中，引入了 for...of 循环，用于遍历可迭代对象（如数组、Set、Map 等）。而在 ES7 中，引入了 async/await，用于处理异步操作。for-await 循环结合了这两个特性，可以在迭代异步数据时使用。
for-await 循环的语法如下：
for await (let item of asyncIterable) {
// ...
}其中，asyncIterable 是一个异步可迭代对象，它必须实现 Symbol.asyncIterator 方法。在每次循环中，await 关键字会等待异步操作完成，并将结果赋值给变量 item。
for-await 循环的用法
在实际开发中，for-await 循环通常与异步生成器（async generator）一起使用。异步生成器是指返回一个异步迭代器（async iterator）的生成器函数，它的语法与普通生成器类似，只是在函数名前加上 async 关键字。
下面是一个示例，使用 for-await 循环遍历一个异步生成器返回的数据：
// javascriptcn.com 代码示例
async function* asyncGenerator() {
yield Promise.resolve(1);
yield Promise.resolve(2);
yield Promise.resolve(3);
}
(async function() {
for await (let item of asyncGenerator()) {
console.log(item);
}
})();在上面的代码中，asyncGenerator 函数返回一个异步迭代器，它依次返回三个 Promise 对象。在 for-await 循环中，await 关键字会等待 Promise 对象完成，并将结果赋值给变量 item，然后打印出来。
for-await 循环的示例
下面是一个更复杂的示例，使用 for-await 循环处理多个异步操作。假设有一个数组 urls，包含多个需要异步请求的 URL，我们可以使用 for-await 循环遍历这个数组，并使用 Promise.all 方法等待所有异步操作完成：
// javascriptcn.com 代码示例
const urls = [
'https://jsonplaceholder.typicode.com/posts/1',
'https://jsonplaceholder.typicode.com/posts/2',
'https://jsonplaceholder.typicode.com/posts/3'
];
async function fetchUrl(url) {
const response = await fetch(url);
const json = await response.json();
return json;
}
(async function() {
const results = [];
for await (let url of urls) {
const result = await fetchUrl(url);
results.push(result);
}
console.log(results);
})();在上面的代码中，fetchUrl 函数用于异步请求一个 URL，并返回响应的 JSON 数据。在 for-await 循环中，我们遍历 urls 数组，并使用 fetchUrl 函数异步请求每个 URL，然后将结果存入 results 数组中。最后，我们打印出 results 数组，即所有异步操作的结果。
总结
for-await 循环是 ES9 中引入的一个新特性，它结合了 for...of 循环和 async/await，可以在异步操作中迭代数据。在实际开发中，for-await 循环通常与异步生成器一起使用，可以方便地处理多个异步操作。使用 for-await 循环需要注意异步可迭代对象必须实现 Symbol.asyncIterator 方法，否则会报错。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65503e9e7d4982a6eb91f4a1