ES2018新功能：异步迭代器 for-await-of

前端

2024-01-30 13:08:23

ES2018 引入的异步迭代器 for-await-of 是一个非常棒的功能，它可以让你更方便地遍历异步数据源。在这个博客文章中，我们将探讨 ES2018 中异步迭代器的概念、语法和使用方式，帮助你更好地理解和使用它。

异步迭代器：告别回调地狱

在 ES2018 之前，如果你需要遍历一个异步数据源，通常需要使用回调函数。这会导致代码变得非常混乱，难以阅读和维护，这就是臭名昭著的“回调地狱”。

异步迭代器通过提供一种更简洁和可读的方式来遍历异步数据源来解决这个问题。它允许你使用一个 for-await-of 循环来遍历异步数据源，就像遍历一个普通的数组一样。

ES2018中的异步迭代器

为了使用异步迭代器，你需要先创建一个异步迭代器对象。你可以通过使用 async/await 来创建一个异步迭代器对象。async/await 关键字允许你编写异步代码，就像编写同步代码一样。

以下是一个创建异步迭代器对象的示例：

async function* createAsyncIterator() {
  for (let i = 0; i < 10; i++) {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    yield i;
  }
}

这个异步迭代器对象将每隔一秒钟生成一个数字，从 0 到 9。

使用异步迭代器

一旦你创建了一个异步迭代器对象，你就可以使用它来遍历异步数据源。你可以使用一个 for-await-of 循环来遍历异步数据源，就像遍历一个普通的数组一样。

以下是一个使用异步迭代器遍历异步数据源的示例：

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

这个代码将每隔一秒钟在控制台输出一个数字，从 0 到 9。

异步迭代器的实现

异步迭代器是使用 Generator 函数和 Iterator 接口实现的。Generator 函数是一种特殊的函数，它可以暂停和恢复执行。Iterator 接口是一个允许你遍历集合的接口。

以下是一个实现异步迭代器的示例：

class AsyncIterator {
  constructor(generatorFunction) {
    this._generatorFunction = generatorFunction;
  }

  [Symbol.asyncIterator]() {
    return this._generatorFunction();
  }
}

async function* createAsyncIterator() {
  for (let i = 0; i < 10; i++) {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    yield i;
  }
}

const asyncIterator = new AsyncIterator(createAsyncIterator);

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