解释 JavaScript 中 async generators 和 for await…of 循环如何实现异步数据流的拉取模式。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位朋友，大家好！今天咱们来聊聊 JavaScript 里一个挺有趣的东西：async generators 和 for await...of 循环。别看名字有点长，其实它们就像一对好基友，专门用来处理异步数据的“拉取”模式。啥叫“拉取”模式？别急，咱们慢慢来，保证你听完之后，也能像我一样，对着代码嘿嘿直乐。

一、啥是异步数据流？

首先，得明白啥叫“异步数据流”。想象一下，你正在从一个遥远的服务器下载一个超大的文件。这个文件不是一下子就能下载完的，而是一块一块地、断断续续地传过来。这就是一种异步数据流。

再比如，你要实时地获取股票市场的数据。这些数据也是源源不断地、随着时间的推移而产生的。这也是一种异步数据流。

简单来说，异步数据流就是指数据不是一次性全部准备好，而是随着时间推移，逐步产生的。

二、传统的处理方式：回调地狱和 Promise 链

如果没有 async generators 和 for await...of，我们之前怎么处理异步数据流呢？大概是这么几种方式：

回调函数： 相信大家都经历过“回调地狱”的痛苦。一层套一层，代码像意大利面一样，缠绕在一起，让人头晕眼花。
Promise 链： Promise 链稍微好一点，至少能把回调函数拍成一条线。但是，如果要处理一个无限的异步数据流，Promise 链就有点力不从心了。你不能无限地 .then() 下去吧？
第三方库： 比如 RxJS 或者 Highland.js。这些库功能强大，但是学习成本也比较高，而且有时候为了一个小功能引入一个大库，有点杀鸡用牛刀的感觉。

三、 Async Generators：异步迭代器的进化

Async generators 就像是 JavaScript 为异步数据流量身定做的工具。它实际上是 ES2018 引入的一个新特性，是 generator functions 的异步版本。

3.1 啥是 Generator Functions？

在讲 async generators 之前，先简单回顾一下 generator functions。 Generator functions 是一种特殊的函数，它可以暂停执行，并在稍后恢复执行。关键的语法是 function* 关键字和 yield 关键字。

举个例子：

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

const iterator = myGenerator();

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 }

在这个例子中，myGenerator 是一个 generator function。它通过 yield 关键字，每次返回一个值。 iterator.next() 方法会执行 generator function，直到遇到下一个 yield 关键字。 next() 方法会返回一个对象，包含 value 和 done 两个属性。 value 是 yield 关键字后面的值， done 表示 generator function 是否执行完毕。

3.2 Async Generators 的闪亮登场

Async generators 和 generator functions 很像，唯一的区别是：

使用 async function* 关键字定义。
可以使用 await 关键字在 yield 表达式中等待一个 Promise。
next() 方法返回一个 Promise，resolve 的值是一个包含 value 和 done 属性的对象。

看个例子：

async function* myAsyncGenerator() {
  await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟异步操作
  yield 1;
  await new Promise(resolve => setTimeout(resolve, 1000));
  yield 2;
  await new Promise(resolve => setTimeout(resolve, 1000));
  yield 3;
}

const asyncIterator = myAsyncGenerator();

asyncIterator.next().then(result => {
  console.log(result); // { value: 1, done: false }
  return asyncIterator.next();
}).then(result => {
  console.log(result); // { value: 2, done: false }
  return asyncIterator.next();
}).then(result => {
  console.log(result); // { value: 3, done: false }
  return asyncIterator.next();
}).then(result => {
  console.log(result); // { value: undefined, done: true }
});

在这个例子中，myAsyncGenerator 是一个 async generator function。每次 yield 之前，它都会等待 1 秒钟。 asyncIterator.next() 返回一个 Promise，我们需要使用 .then() 方法来获取结果。

3.3 Async Generators 的优势

Async generators 有以下几个优势：

简化异步代码： 可以使用 await 关键字，让异步代码看起来像同步代码一样。
更容易处理异步数据流： 可以通过 yield 关键字，逐步地产生数据。
可暂停和恢复执行： 可以暂停执行，并在稍后恢复执行，这在处理大型数据集或者需要进行复杂计算时非常有用。
延迟计算： Async generators 只在需要时才计算下一个值，这可以节省资源。

四、 for await...of 循环：优雅地消费异步数据

Async generators 负责生产异步数据， for await...of 循环负责消费这些数据。 for await...of 循环是 ES2018 引入的一个新特性，专门用来遍历 async iterators。

4.1 语法

for await...of 循环的语法如下：

for await (const variable of iterable) {
  // code to execute
}

其中，iterable 必须是一个 async iterable 对象。所谓 async iterable 对象，就是指它必须有一个 Symbol.asyncIterator 方法，该方法返回一个 async iterator 对象。 Async generators 返回的就是 async iterator 对象，所以可以直接在 for await...of 循环中使用。

4.2 例子

让我们用 for await...of 循环来消费上面 myAsyncGenerator 产生的数据：

async function* myAsyncGenerator() {
  await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟异步操作
  yield 1;
  await new Promise(resolve => setTimeout(resolve, 1000));
  yield 2;
  await new Promise(resolve => setTimeout(resolve, 1000));
  yield 3;
}

async function main() {
  for await (const value of myAsyncGenerator()) {
    console.log(value);
  }
  console.log("Done!");
}

main();

在这个例子中，for await...of 循环会自动地调用 myAsyncGenerator() 的 next() 方法，并等待 Promise resolve。每次循环，value 变量都会被赋值为 next() 方法返回的 value 属性。当 next() 方法返回的 done 属性为 true 时，循环结束。

4.3 for await...of 循环的优势

for await...of 循环有以下几个优势：

简化异步代码： 避免了手动调用 next() 方法和处理 Promise 的麻烦。
更可读： 代码看起来更像同步代码，更容易理解。
更简洁： 比手动处理 Promise 链更简洁。

五、实际应用场景

Async generators 和 for await...of 循环在很多场景下都非常有用。比如：

读取大型文件： 可以逐行读取大型文件，而不用一次性将整个文件加载到内存中。
处理服务器推送的数据： 可以实时地处理服务器推送的数据，比如股票市场的数据或者聊天消息。
分页加载数据： 可以分页加载数据，而不用一次性加载所有数据。
实现自定义的异步迭代器： 可以创建自定义的异步迭代器，用于处理各种复杂的异步数据源。

六、案例分析：从 API 获取数据

让我们来看一个更实际的例子：从 API 获取数据。假设我们有一个 API，每次调用都会返回一个包含 10 条数据的数组。我们可以使用 async generators 和 for await...of 循环来分页获取数据。

async function* fetchDataFromAPI(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;
      return; // Important:  explicitly return when no more data
    }

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

    page++;
  }
}

async function main() {
  const apiUrl = "https://your-api-endpoint.com/data"; // 替换成你的 API 地址

  for await (const item of fetchDataFromAPI(apiUrl)) {
    console.log(item);
  }

  console.log("All data fetched!");
}

main();

在这个例子中，fetchDataFromAPI 函数是一个 async generator。它会不断地从 API 获取数据，直到 API 返回空数组。 for await...of 循环会遍历 fetchDataFromAPI 函数返回的 async iterator，并打印每一条数据。注意，代码中需要一个显式的 return 语句，在没有更多数据时终止 generator。否则 for await...of 循环会无限期地运行下去。

七、错误处理

在使用 async generators 和 for await...of 循环时，也要注意错误处理。可以在 async generator 函数中使用 try...catch 语句来捕获错误。也可以在 for await...of 循环中使用 try...catch 语句来捕获错误。

async function* myAsyncGenerator() {
  try {
    await new Promise((resolve, reject) => setTimeout(reject, 1000, "Oops!"));
    yield 1;
  } catch (error) {
    console.error("Error in generator:", error);
  }
}

async function main() {
  try {
    for await (const value of myAsyncGenerator()) {
      console.log(value);
    }
  } catch (error) {
    console.error("Error in main:", error);
  }
}

main();

在这个例子中，myAsyncGenerator 函数会抛出一个错误。 try...catch 语句会捕获这个错误，并打印到控制台。 main 函数也使用了 try...catch 语句来捕获错误。如果 async generator 函数抛出一个错误，并且没有被内部的 try...catch 语句捕获，那么这个错误会传递到 for await...of 循环。

八、总结

Async generators 和 for await...of 循环是 JavaScript 中处理异步数据流的利器。它们可以简化异步代码，提高代码的可读性和可维护性。如果你需要处理异步数据流，不妨试试它们，相信你会爱上它们的。

特性	描述	优势
Async Generators	使用 `async function*` 定义，通过 `yield` 关键字返回异步数据。每次 `yield` 可以等待一个 Promise。`next()` 方法返回一个 Promise，resolve 的值包含 `value` 和 `done` 属性。	简化异步代码，更容易处理异步数据流，可暂停和恢复执行，延迟计算。
`for await...of`	用于遍历 async iterators。自动调用 async iterator 的 `next()` 方法，并等待 Promise resolve。每次循环，变量会被赋值为 `next()` 方法返回的 `value` 属性。当 `next()` 方法返回的 `done` 属性为 `true` 时，循环结束。	简化异步代码，更可读，更简洁。
错误处理	可以在 async generator 函数中使用 `try...catch` 语句来捕获错误。也可以在 `for await...of` 循环中使用 `try...catch` 语句来捕获错误。如果 async generator 函数抛出一个错误，并且没有被内部的 `try...catch` 语句捕获，那么这个错误会传递到 `for await...of` 循环。	保证程序的健壮性，避免程序崩溃。

好了，今天的讲座就到这里。希望大家有所收获！如果有什么问题，欢迎提问。记住，编程就像谈恋爱，要多实践，才能找到真爱！咱们下次再见！

发表回复 取消回复

发表回复取消回复