异步迭代器与异步生成器 (ES2018+) 讲座

大家好，欢迎来到今天的讲座！今天我们要聊的是 JavaScript 中的“异步迭代器”和“异步生成器”，这是 ES2018 引入的两个非常有趣的新特性。如果你已经熟悉了同步的迭代器和生成器，那么今天的内容会让你觉得像是在玩“异步版”的游戏。如果你还不熟悉这些概念，别担心，我会尽量用通俗易懂的语言来解释。

1. 回顾：同步迭代器与生成器

在我们深入异步的世界之前，先简单回顾一下同步的迭代器和生成器。

1.1 同步迭代器

迭代器是一个可以逐个返回集合中元素的对象。它有一个 next() 方法，每次调用时会返回一个对象，包含两个属性：

• value: 当前的值。
• done: 一个布尔值，表示是否已经遍历完了。

举个例子，我们可以创建一个简单的迭代器来遍历数组：

const array = [1, 2, 3];
const iterator = array[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

1.2 同步生成器

生成器是一种特殊的函数，它可以暂停执行并在需要时恢复。生成器函数使用 function* 语法，并且可以在函数体内使用 yield 关键字来暂停执行并返回一个值。生成器本身也是一个迭代器。

function* generateNumbers() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generateNumbers();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

2. 异步迭代器与异步生成器

现在，让我们进入异步的世界！异步迭代器和异步生成器的核心思想是：它们允许我们在异步操作中进行迭代。这意味着你可以在等待某些异步任务完成的同时，逐步处理数据。

2.1 异步迭代器

异步迭代器与同步迭代器非常相似，唯一的区别是它的 next() 方法返回的是一个 Promise，而不是直接返回结果。这意味着你可以使用 async/await 来处理异步操作。

// 定义一个异步迭代器
const asyncIterator = {
  [Symbol.asyncIterator]() {
    return {
      i: 0,
      next: async () => {
        if (this.i < 3) {
          await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟异步操作
          return { value: this.i++, done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

// 使用 for await...of 遍历异步迭代器
(async function() {
  for await (const value of asyncIterator) {
    console.log(value); // 0, 1, 2
  }
})();

2.2 异步生成器

异步生成器是生成器的异步版本。它使用 async function* 语法，并且可以在函数体内使用 yield 或 yield* 来暂停执行并返回一个 Promise。异步生成器返回的是一个异步迭代器。

async function* generateNumbersAsync() {
  yield 1;
  await new Promise(resolve => setTimeout(resolve, 1000));
  yield 2;
  await new Promise(resolve => setTimeout(resolve, 1000));
  yield 3;
}

// 使用 for await...of 遍历异步生成器
(async function() {
  for await (const value of generateNumbersAsync()) {
    console.log(value); // 1, 2, 3
  }
})();

3. 实际应用场景

异步迭代器和异步生成器在处理流式数据、网络请求、文件读取等场景中非常有用。下面是一些实际应用的例子。

3.1 处理流式数据

假设你正在从服务器获取大量数据，但你不希望一次性将所有数据加载到内存中。你可以使用异步迭代器来逐步处理数据。

async function* fetchDataStream(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();

  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      yield value; // 每次返回一部分数据
    }
  } finally {
    reader.releaseLock();
  }
}

// 使用 for await...of 遍历流式数据
(async function() {
  for await (const chunk of fetchDataStream('https://example.com/data')) {
    console.log(chunk); // 处理每一部分数据
  }
})();

3.2 读取大文件

当你需要读取一个非常大的文件时，异步生成器可以帮助你逐步读取文件内容，而不会一次性占用大量内存。

async function* readLargeFile(filePath) {
  const fileStream = fs.createReadStream(filePath, { encoding: 'utf-8' });
  for await (const chunk of fileStream) {
    yield chunk; // 每次返回一部分文件内容
  }
}

// 使用 for await...of 读取大文件
(async function() {
  for await (const line of readLargeFile('large-file.txt')) {
    console.log(line); // 处理每一行
  }
})();

3.3 分页 API 请求

许多 API 提供分页功能，允许你逐步获取数据。异步生成器可以帮助你自动化这个过程。

async function* paginateAPI(url, pageSize = 10) {
  let page = 1;
  let hasMore = true;

  while (hasMore) {
    const response = await fetch(`${url}?page=${page}&pageSize=${pageSize}`);
    const data = await response.json();

    if (data.length === 0) {
      hasMore = false;
    } else {
      for (const item of data) {
        yield item;
      }
      page++;
    }
  }
}

// 使用 for await...of 获取分页数据
(async function() {
  for await (const item of paginateAPI('https://api.example.com/items')) {
    console.log(item); // 处理每一页的数据
  }
})();

4. 总结

异步迭代器和异步生成器是 ES2018 引入的强大工具，它们让你可以在异步操作中进行迭代，而不需要一次性处理所有数据。通过 for await...of 语法，你可以轻松地遍历异步数据源，如流式数据、文件读取、分页 API 等。

如果你已经熟悉了同步的迭代器和生成器，那么异步版本的学习曲线并不会太高。只需要记住一点：异步迭代器的 next() 方法返回的是 Promise，而异步生成器则是基于 async function* 的。

希望今天的讲座对你有所帮助！如果你有任何问题，欢迎随时提问。下次见！ 😊

---

引用：

• MDN Web Docs: The for await...of statement is used to iterate over the asyncIterable objects.
• ECMAScript Specification: The async and await keywords provide a way to work with asynchronous functions in a more synchronous-like manner.
• Node.js Documentation: The fs.createReadStream method returns a readable stream for reading files asynchronously.