ES8 中的异步迭代器 'async-iterator' 详解

随着前端应用程序的不断发展，异步操作越来越普遍。ES8 的新增特性——异步迭代器（async-iterator）成为了解决这一问题的良好解决方案。本文将详细介绍 ES8 中的异步迭代器。

概述

异步迭代器是一种特殊的迭代器，它可以通过一系列的 Promise 对象来迭代异步数据。在循环过程中，当一个 Promise 对象被解算，就会产生一个新的迭代值。

异步迭代器是基于普通迭代器（iterator）的增强版，以解决异步操作的问题。相较于普通迭代器，它可以使用 await 和 async 关键字进行底层实现。

创建异步迭代器

要创建异步迭代器，可以通过在 Symbol.asyncIterator 属性上定义异步迭代器来实现。下面这个模拟 API 调用的示例代码展示了如何创建异步迭代器：

class API {
  constructor() {
    this.data = ["a", "b", "c"];
  }

  async *[Symbol.asyncIterator]() {
    for (let item of this.data) {
      yield await this.asyncFunction(item);
    }
  }

  async asyncFunction(item) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(item.toUpperCase());
      }, Math.floor(Math.random() * 1000));
    });
  }
}

async function main() {
  const api = new API();
  for await (let item of api) {
    console.log(item);
  }
}

main();

如上代码所示，通过使用 Symbol.asyncIterator 属性创建了异步迭代器。*[Symbol.asyncIterator]() 方法中通过 yield await 将异步操作转化为同步流程。

在上述代码示例中，我们构建了一个名为 API 的数据容器，其中创建了一个异步遍历器，它可以迭代异步返回的结果。

for await...of 循环

在异步迭代器中，通过 for await...of 循环来实现对异步数据的迭代。其语法类似于普通迭代器中的 for...of 循环，可以直接迭代异步产生的结果。

下面的代码示例中展示了使用 for await...of 实现的异步迭代器循环：

class API {
  constructor() {
    this.data = ["a", "b", "c"];
  }

  async *[Symbol.asyncIterator]() {
    for (let item of this.data) {
      yield await this.asyncFunction(item);
    }
  }

  async asyncFunction(item) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(item.toUpperCase());
      }, Math.floor(Math.random() * 1000));
    });
  }
}

async function main() {
  const api = new API();
  for await (let item of api) {
    console.log(item);
  }
}

main();

在这个示例代码中，使用 for await...of 循环来遍历异步数据。在循环中，item 就是异步 Promise 对象的返回结果。

总结

在前端应用程序中，异步操作变得越来越常见，ES8 中的异步迭代器是解决这一问题的有效方式。本文中，我们了解了异步迭代器的概念、创建方法以及使用方式，并使用示例代码加以说明。

借助于 ES8 中的异步迭代器，你可以更轻松地处理异步数据，如服务端响应、文件上传、WebSockets 等，从而提高程序的可维护性和性能。

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