JS `Symbol.asyncIterator`：自定义异步迭代行为与 `for await…of` 循环

各位观众老爷，晚上好！今天咱们聊聊 JavaScript 里一个挺有意思的东西：Symbol.asyncIterator。这玩意儿听起来有点高大上，但其实就是给你的对象加上“异步迭代”这个超能力，配合 for await...of 循环，能让你轻松处理那些需要等待的操作，比如从网络请求数据、读取文件啥的。

啥是迭代器？先热个身

在咱们深入“异步迭代器”之前，先简单回顾一下普通的迭代器。迭代器这概念，其实就是提供了一种统一的方式，让你能一个一个地访问一个集合里的元素，而不用关心这个集合内部是怎么实现的。

想象一下，你有一盒巧克力，你想一个一个地拿出来吃。迭代器就像是一个帮你从盒子里拿巧克力的机器人，你不用管巧克力是怎么排列的，机器人会帮你一个一个地拿，直到盒子空了。

JavaScript 里，迭代器通常长这样：

const myIterable = {
  data: [1, 2, 3],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      },
    };
  },
};

for (const item of myIterable) {
  console.log(item); // 输出 1, 2, 3
}

这里：

myIterable 是一个可迭代对象，因为它有 [Symbol.iterator] 方法。
[Symbol.iterator] 方法返回一个迭代器对象。
迭代器对象有一个 next() 方法，每次调用 next() 方法，它会返回一个对象，包含两个属性：value 和 done。
- value 是当前迭代到的元素。
- done 是一个布尔值，表示迭代是否结束。

for...of 循环会自动调用 [Symbol.iterator] 方法获取迭代器，然后不断调用 next() 方法，直到 done 为 true 为止。

异步迭代器：给迭代加上时间魔法

普通的迭代器很棒，但它只能处理同步的数据。如果数据是异步的，比如需要从服务器获取，那就抓瞎了。这时候，异步迭代器就派上用场了。

异步迭代器跟普通迭代器很像，区别在于：

它使用 Symbol.asyncIterator 作为方法名，而不是 Symbol.iterator。
它的 next() 方法返回一个 Promise，Promise resolve 的值就是 value 和 done 组成的对象。

换句话说，next() 方法不再是瞬间完成的，而是需要等待一段时间才能拿到结果。

举个例子，假设我们要模拟一个异步的数据流，每隔 1 秒产生一个数字：

const myAsyncIterable = {
  data: [1, 2, 3],
  [Symbol.asyncIterator]() {
    let index = 0;
    return {
      next: () => {
        return new Promise((resolve) => {
          setTimeout(() => {
            if (index < this.data.length) {
              resolve({ value: this.data[index++], done: false });
            } else {
              resolve({ value: undefined, done: true });
            }
          }, 1000);
        });
      },
    };
  },
};

注意，这里的 next() 方法返回了一个 Promise，这个 Promise 会在 1 秒后 resolve。

`for await...of`：异步迭代的完美搭档

有了异步迭代器，总得有个循环来配合使用吧？这就是 for await...of 循环的用武之地。

for await...of 循环专门用来迭代异步迭代器。它会等待 next() 方法返回的 Promise resolve，然后把 resolve 的值赋给循环变量。

继续上面的例子，我们可以这样使用 for await...of 循环：

async function main() {
  for await (const item of myAsyncIterable) {
    console.log(item); // 每隔 1 秒输出 1, 2, 3
  }
  console.log("迭代完成");
}

main();

注意，for await...of 循环只能在 async 函数中使用。

总结一下：

特性	普通迭代器	异步迭代器
方法名	`Symbol.iterator`	`Symbol.asyncIterator`
`next()` 返回值	`{ value: any, done: boolean }`	`Promise<{ value: any, done: boolean }>`
循环方式	`for...of`	`for await...of`

实际应用：异步数据流的处理

异步迭代器最常见的应用场景就是处理异步数据流。比如，从服务器分页获取数据：

async function* fetchPages() {
  let page = 1;
  while (true) {
    const response = await fetch(`https://api.example.com/data?page=${page}`);
    const data = await response.json();

    if (data.length === 0) {
      return; // 没有更多数据了
    }

    for (const item of data) {
      yield item;
    }

    page++;
  }
}

async function main() {
  for await (const item of fetchPages()) {
    console.log(item); // 输出每一项数据
  }
  console.log("数据获取完成");
}

main();

在这个例子中，fetchPages 是一个异步生成器函数（async generator function）。异步生成器函数是一种特殊的函数，它可以使用 yield 关键字来产生值，并且可以使用 await 关键字来等待 Promise resolve。

fetchPages 函数会不断地从服务器获取数据，直到服务器返回空数组为止。每次获取到数据后，它会使用 yield 关键字将数据项产生出来。

for await...of 循环会不断地从 fetchPages 函数获取数据，并打印到控制台。

注意：

异步生成器函数必须使用 async function* 声明。
异步生成器函数内部可以使用 await 关键字。
异步生成器函数返回一个异步迭代器。

更多骚操作：自定义异步迭代逻辑

除了从服务器获取数据，异步迭代器还可以用于各种其他场景，比如：

读取大型文件：可以分块读取文件，避免一次性加载到内存中。
处理 WebSocket 数据流：可以实时处理 WebSocket 连接接收到的数据。
实现自定义的异步数据源：可以根据自己的需求，实现各种各样的异步数据源。

下面是一个例子，演示如何使用异步迭代器来读取大型文件：

const fs = require('fs');
const readline = require('readline');

async function* readFileByLines(filePath) {
  const fileStream = fs.createReadStream(filePath);

  const rl = readline.createInterface({
    input: fileStream,
    crlfDelay: Infinity, // 识别所有的换行符
  });

  for await (const line of rl) {
    yield line;
  }
}

async function main() {
  const filePath = 'large_file.txt'; // 替换成你的文件路径
  for await (const line of readFileByLines(filePath)) {
    console.log(line); // 逐行输出文件内容
  }
  console.log("文件读取完成");
}

main();

在这个例子中，readFileByLines 函数使用 fs.createReadStream 和 readline.createInterface 来逐行读取文件。它使用 yield 关键字将每一行数据产生出来。

for await...of 循环会不断地从 readFileByLines 函数获取数据，并打印到控制台。

错误处理：别忘了 try…catch

在使用异步迭代器的时候，别忘了处理可能出现的错误。可以在 for await...of 循环中使用 try...catch 语句来捕获错误：

async function main() {
  try {
    for await (const item of myAsyncIterable) {
      console.log(item);
    }
  } catch (error) {
    console.error("发生错误:", error);
  }
}

main();

异步迭代器 vs. Promise.all：选择哪个？

你可能想问，既然 Promise.all 也能并发处理多个异步操作，那异步迭代器有什么优势呢？

Promise.all 会等待所有的 Promise resolve 之后才返回结果，而异步迭代器可以逐个处理 Promise resolve 的结果，无需等待所有 Promise 完成。

特性	`Promise.all`	异步迭代器
执行方式	并发执行所有 Promise，等待全部完成	逐个处理 Promise resolve 的结果，无需等待全部完成
内存占用	需要同时保存所有 Promise 的结果	逐个处理结果，内存占用更小
适用场景	需要所有 Promise 都完成后才能进行下一步操作	只需要逐个处理结果，无需等待全部完成

总的来说，如果你的场景需要并发执行多个异步操作，并且需要所有操作都完成后才能进行下一步操作，那么 Promise.all 更适合。如果你的场景只需要逐个处理异步操作的结果，无需等待所有操作完成，那么异步迭代器更适合。

小结

Symbol.asyncIterator 和 for await...of 循环是 JavaScript 中处理异步数据流的利器。它们可以让你轻松地实现各种各样的异步迭代逻辑，比如从服务器分页获取数据、读取大型文件、处理 WebSocket 数据流等等。

希望今天的讲座能帮助你更好地理解和使用异步迭代器。记住，多实践，才能真正掌握！祝大家编程愉快！