如何在 ECMAScript 2018 中使用 for-await-of 语句？-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2018 中，我们可以使用 for-await-of 语句来遍历异步可迭代对象。这个新的语法可以让我们更方便地处理异步操作，比如在处理多个异步请求时，可以将它们组合在一起，以便更加高效地处理它们。

本文将详细介绍如何在 ECMAScript 2018 中使用 for-await-of 语句，包括语法、用法和示例代码。

语法

for-await-of 语句的语法与 for-of 语句类似，只是在 of 后面加上了 await 关键字。具体语法如下：

for await (variable of asyncIterable) {
  // statements
}

其中，variable 是一个变量名，用于存储每次迭代的值；asyncIterable 是一个异步可迭代对象，它可以是一个异步生成器或一个返回异步迭代器的对象。

用法

使用 for-await-of 语句时，我们首先需要创建一个异步可迭代对象。下面是一个简单的异步生成器示例：

async function* asyncGenerator() {
  yield Promise.resolve(1);
  yield Promise.resolve(2);
  yield Promise.resolve(3);
}

这个异步生成器返回一个异步迭代器，每次迭代都会返回一个 Promise 对象。

现在，我们可以使用 for-await-of 语句来遍历这个异步可迭代对象：

(async function() {
  for await (let value of asyncGenerator()) {
    console.log(value);
  }
})();

输出结果为：

1
2
3

在上面的示例中，我们使用了 async function 来异步执行 for-await-of 循环。这是因为 for-await-of 循环本身是同步的，它只能在异步环境中使用。

示例代码

下面是一个更复杂的示例，它演示了如何使用 for-await-of 语句来处理多个异步请求：

async function fetchUsers() {
  let userIds = [1, 2, 3];
  let userPromises = userIds.map(id => fetch(`https://jsonplaceholder.typicode.com/users/${id}`));
  for await (let response of userPromises) {
    let user = await response.json();
    console.log(user.name);
  }
}

在上面的示例中，我们使用了 map 方法来创建一个包含多个异步请求的 Promise 数组。然后，我们使用 for-await-of 循环来遍历这个数组，每次迭代都会返回一个 Response 对象。在循环体内，我们使用 await 关键字来等待 Promise 的解决，并使用 response.json() 方法将响应体解析为 JSON 对象。最后，我们输出了每个用户的名称。

总结

for-await-of 语句是 ECMAScript 2018 中的一个新特性，它可以让我们更方便地处理异步操作。在使用 for-await-of 语句时，我们需要创建一个异步可迭代对象，并在异步环境中使用它。通过本文的介绍，你应该已经掌握了如何使用 for-await-of 语句来处理异步操作，并可以在实际项目中应用它。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6510e87d95b1f8cacd94a599