解析 ES8 引入的 async iterator-JavaScript中文网-JavaScript教程资源分享门户

在 ES8 中，引入了 async iterator，它是异步迭代器的一种实现方式，其主要目的是简化异步数据的访问。

本文将为大家详细介绍 async iterator 的定义、实现方式、应用场景以及使用方法，并提供示例代码，帮助读者全面了解 async iterator 的概念与运用。

定义

async iterator 是一种异步迭代的实现方式，它和普通的迭代器（iterator）类似，但能够处理异步数据的情况，支持返回 Promise 对象，以实现异步获取数据的目的。

在 ES8 中，为了支持异步迭代器的使用，定义了一个接口 Symbol.asyncIterator，表示这个对象是异步可迭代的。

实现方式

实现一个异步迭代器，需要定义一个 asyncIterator 方法，该方法返回一个对象，并且该对象有一个 next 方法，next 方法返回一个 Promise 对象，包含 value 和 done 属性。

其中：

value：表示当前步骤中迭代器返回的值。
done：表示迭代器是否已经完成。

在调用 async iterator 的 next 方法后，需要等待返回的 Promise 对象的状态变为 resolved 才能获取该 Promise 的 value。

示例代码：

// javascriptcn.com 代码示例
async function* example() {
  yield 1;
  yield new Promise(resolve => setTimeout(() => resolve(2), 1000));
}

(async () => {
  for await (const value of example()) {
    console.log(value);
  }
})();

上述代码中，我们构造了一个异步迭代器，使用 async 函数和 yield 操作符生成一个包含两个值的迭代器，其中第二个值是一个 Promise 对象，等待 1000 毫秒后才能调用 resolve。接着我们使用 for await...of 语句，实现异步迭代器获取结果并输出。

应用场景

async iterator 的使用场景很多，在开发中，最常见的场景是异步迭代数据的访问，比如 AJAX 请求、读取文件或者远程获取数据等。

同时，async iterator 提供了与流（Stream）的接口，因此可以方便地实现流式数据的操作，比如读取大量数据，并以流形式返回结果。在 Node.js 的 fs 模块中，就有一个 createReadStream 方法，可以定义一个异步迭代器，方便地读取文件。

使用方法

下面我们以获取远程数据为例，说明 async iterator 的使用方法。

示例代码：

// javascriptcn.com 代码示例
async function* getPage(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      return;
    }
    yield value;
  }
}

(async () => {
  let responseText = '';
  for await (const chunk of getPage('https://api.github.com/users')) {
    responseText += new TextDecoder().decode(chunk);
  }
  console.log(responseText)
})();

在上述代码中，我们使用了 fetch API 获取输入的 URL 数据，用 reader.read 方法一次一次地获取数据块并解码，最终将得到的所有数据块拼接成完整的响应。

总结

本文详细介绍了 ES8 中引入的 async iterator，定义了其概念、实现方式、应用场景以及使用方法，并提供了相应的示例代码，帮助读者更深入地了解和掌握异步迭代器的运用技巧，实现异步数据访问。

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