ES7 中的异步迭代与 for-await-of 结合使用详解

在 JavaScript 的异步编程中，Promise 和 async/await 已经成为了最常用的方式。但是在 ES7 中，还有一种比较新的异步编程方式，那就是异步迭代。

异步迭代是指可以通过一种特殊的方式，让迭代器能够支持异步操作。这个特殊的方式就是 Symbol.asyncIterator。

在 ES7 中，我们可以使用 for-await-of 循环来遍历异步迭代器。这种方式非常方便，因为它能够自动处理异步操作，并且可以让代码更加简洁易懂。

Symbol.asyncIterator

在 ES6 中，我们已经可以使用 Symbol.iterator 来实现迭代器。而在 ES7 中，新增了一个 Symbol.asyncIterator，它可以用来创建异步迭代器。

异步迭代器的定义方式与普通迭代器类似，只是在 next 方法中返回的是一个 Promise 对象。这个 Promise 对象的值应该是一个包含 value 和 done 属性的对象，其中 value 表示当前迭代到的值，done 表示是否已经迭代完毕。

下面是一个简单的示例：

// javascriptcn.com 代码示例
const myAsyncIterable = {
  async *[Symbol.asyncIterator]() {
    yield Promise.resolve(1);
    yield Promise.resolve(2);
    yield Promise.resolve(3);
  }
};

(async function() {
  for await (const x of myAsyncIterable) {
    console.log(x);
  }
})();

在这个示例中，我们定义了一个异步迭代器 myAsyncIterable，它返回了三个 Promise 对象。然后我们使用 for-await-of 循环来遍历这个异步迭代器，并输出每个 Promise 对象的值。

for-await-of 循环

for-await-of 循环是一个用来遍历异步迭代器的语法结构。它的语法与普通的 for-of 循环类似，只是在迭代过程中会自动等待 Promise 对象的结果。

下面是一个简单的示例：

// javascriptcn.com 代码示例
async function fetchAllData() {
  const urls = ['http://example.com/data1', 'http://example.com/data2', 'http://example.com/data3'];
  const data = [];
  
  for await (const url of urls) {
    const response = await fetch(url);
    const json = await response.json();
    data.push(json);
  }
  
  return data;
}

在这个示例中，我们定义了一个异步函数 fetchAllData，它会遍历一个包含三个 URL 的数组，并获取每个 URL 对应的 JSON 数据。在遍历过程中，我们使用了 for-await-of 循环来遍历异步迭代器，并且在每个迭代中等待 Promise 对象的结果。

总结

ES7 中的异步迭代和 for-await-of 循环为 JavaScript 的异步编程带来了更多的可能性。它们可以让我们更加方便地处理异步操作，并且让代码更加简洁易懂。

当然，在实际的开发中，我们还需要注意一些细节问题，比如异步迭代器的定义方式、Promise 对象的处理等等。但是只要掌握了基本的使用方法，就能够很好地应用它们来解决实际的问题。

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