ES9 中的 for-await-of 循环带来的新特性和应用

随着 JavaScript 语言的不断发展，在 ES9 中，新增了一个很有用的特性：for-await-of 循环。这个新特性在异步编程中发挥了很大的作用，使得开发者能够更加方便地处理异步操作。

for-await-of 循环的基本用法

for-await-of 循环跟 for-of 循环非常相似，不同的是它可以迭代异步操作返回的结果。其基本语法如下：

for await (let item of asyncIterable) {
  // 代码逻辑
}

其中，asyncIterable 是一个异步可迭代对象，而 item 则是每一次迭代返回的结果。

for-await-of 循环的应用场景

使用 for-await-of 循环，我们可以方便地处理异步操作。比如，我们可以使用 async/await 将异步代码转换为同步代码，并直接使用 for-await-of 循环进行异步遍历操作。

// javascriptcn.com 代码示例
async function asyncGenerator() {
  for (let i = 0; i < 3; i++) {
    await sleep(1000);
    yield i;
  }
}

async function run() {
  for await (let value of asyncGenerator()) {
    console.log(`Result: ${value}`);
  }
}

run();

上述代码中，我们定义了一个异步生成器 asyncGenerator，它每隔1秒钟输出一个数字。然后，在 run 函数中，我们使用 for-await-of 循环遍历这个异步生成器，并输出每一次迭代的结果。

另外，我们也可以通过 for-await-of 循环处理多个异步操作。比如，我们可以将一组异步操作封装为 Promise 对象，并在 for-await-of 循环中进行遍历操作。

// javascriptcn.com 代码示例
async function run() {
  const results = await Promise.all([
    fetch('/api/data1'),
    fetch('/api/data2'),
    fetch('/api/data3'),
  ]);

  for await (let result of results) {
    console.log(await result.json());
  }
}

run();

上述代码中，我们使用 Promise.all 将三个异步操作封装成一个 Promise 对象，然后使用 for-await-of 循环遍历这个 Promise 对象返回的结果，并输出每项结果对应的 JSON 数据。

总结

for-await-of 循环是 ES9 中一个非常有用的特性，在异步编程中发挥了很大的作用。通过 for-await-of 循环，我们可以方便地处理异步操作，将异步代码转换为同步代码，并且能够处理多个异步操作。因此，学习和应用这个特性，可以使我们更加方便地进行异步编程。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654090be7d4982a6eba126c6