在 ECMAScript 2020 中使用 for await...of 语法实现异步迭代

什么是异步迭代？

在 JavaScript 中，迭代器是一种可以遍历集合中所有元素的对象。ES6 引入了 for...of 循环，使得迭代更加简单和可读。但是在异步编程中，我们需要处理异步操作，比如从服务器获取数据或者读取文件，这时候就需要异步迭代器来处理异步操作。

异步迭代器是一种可以异步遍历集合中所有元素的对象。在每一次迭代时，异步迭代器返回一个 Promise 对象，当 Promise 对象 resolve 时，返回当前元素的值。当所有元素都迭代完成时，Promise 对象 resolve。

for await...of 语法

在 ECMAScript 2020 中，引入了 for await...of 语法，可以用来遍历异步迭代器中的元素。它的语法和 for...of 循环类似，但是它可以处理异步迭代器中返回的 Promise 对象。

for await (const item of asyncIterable) {
  // 处理每一个异步元素
}

实现一个异步迭代器

下面是一个简单的示例，演示如何实现一个异步迭代器。

// javascriptcn.com 代码示例
async function* asyncGenerator() {
  yield Promise.resolve(1);
  yield Promise.resolve(2);
  yield Promise.resolve(3);
}

(async function() {
  for await (const item of asyncGenerator()) {
    console.log(item);
  }
})();

在这个示例中，我们定义了一个异步生成器 asyncGenerator，它返回一个 Promise 对象。在 for await...of 循环中，我们遍历异步生成器中的每一个元素，并在控制台中打印它们的值。

使用异步迭代器处理异步操作

下面是一个更实际的示例，演示如何使用异步迭代器处理异步操作。

// javascriptcn.com 代码示例
async function* fetchUrls(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    yield await response.text();
  }
}

(async function() {
  const urls = ['https://jsonplaceholder.typicode.com/posts/1', 'https://jsonplaceholder.typicode.com/posts/2'];
  for await (const data of fetchUrls(urls)) {
    console.log(data);
  }
})();

在这个示例中，我们定义了一个异步迭代器 fetchUrls，它接受一个包含 URL 的数组作为参数。在 for...of 循环中，我们遍历 URL 数组，并使用 fetch 函数获取数据。在每一个迭代步骤中，我们返回 Promise 对象，当 Promise 对象 resolve 时，返回数据。在循环结束后，我们打印每一个数据。

总结

在 ECMAScript 2020 中，我们可以使用 for await...of 语法来遍历异步迭代器中的元素。异步迭代器是一种可以异步遍历集合中所有元素的对象。在异步编程中，我们可以使用异步迭代器处理异步操作，比如从服务器获取数据或者读取文件。在实际开发中，我们可以使用异步迭代器来提高代码的可读性和可维护性。

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