掌握JavaScript的异步迭代器，让你的前端代码更上一层楼！

前端达人

于 2024-08-15 08:00:10 发布

阅读量1k

点赞数 11

文章标签：前端 javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/141258056

版权

作为一名JavaScript开发者，你是否也曾为如何优雅地处理异步操作而苦恼？别担心，今天我要向大家介绍一个强大的工具——Async Generators。

在之前的文章《掌握JavaScript的迭代器，助你更高效地处理异步编程》中，我已经详细介绍了迭代器的相关知识。如果你还没有阅读，建议先看看那篇文章，会对你理解本文的内容有很大帮助。

本文将深入浅出地为你讲解Async Generators是什么，它为何如此强大，以及如何在实际开发中充分利用它。无论你是编程小白，还是经验丰富的开发者，相信都能从中受益。准备好了吗？让我们一起揭开Async Generators的神秘面纱吧！

什么是Async Generators？

简单来说，Async Generators就是异步函数和生成器函数的强强联合。它们让我们可以处理那些会逐步产生多个值的异步操作，而不仅仅是单一的值。

打个比方，如果说普通的异步函数是快递员一次送达一个包裹，那么Async Generators就是配送员可以在不同时间点多次送达包裹。而且，你还可以在每次送达时查看和处理包裹内容。

Async Generators 的定义

要定义一个Async Generator函数，我们需要使用async function*语法。来看一个简单的示例：

async function* myAsyncGenerator() {
  yield await someAsyncOperation();
}

业务场景举例

假设我们在开发一个电商平台，需要依次处理多个订单，确保每个订单都能按顺序处理并及时更新状态。使用Async Generators，我们可以轻松实现这一点。

async function* orderProcessor() {
  const orderList = await fetchOrderList();
  for (const order of orderList) {
    // 假设处理单个订单的函数会返回处理结果
    const result = await processSingleOrder(order);
    // 使用yield返回处理结果
    yield result;
  }
}

// 在实际使用时，我们可以这样做：
async function processAllOrders() {
  const processor = orderProcessor();
  for await (const result of processor) {
    console.log(`Order processed result: ${result}`);
    // 可以在这里更新订单状态或者进行其他操作
  }
}

// 调用处理函数来处理订单
processAllOrders();

在这个例子中，我们通过fetchOrderList获取所有待处理的订单，然后依次处理每个订单，并返回处理结果。在处理所有订单的过程中，我们使用for await...of语法依次获取每个订单的处理结果，并进行相应的操作。

为什么选择 Async Generators？

Async Generators 在 JavaScript 中解决了许多常见问题，是提升代码效率和可读性的有力工具。让我们一起来看看它们的强大之处吧！

处理异步数据流

Async Generators 提供了一种直观的方法来处理逐步到达的数据。比如在电商平台上，我们需要处理实时到达的订单数据，而不是一次性加载所有订单。使用 Async Generators，我们可以在订单到达时逐步处理它们，大大提升了处理效率。

内存效率

如果要处理大量数据集，直接加载所有数据会占用大量内存。Async Generators 允许我们逐步处理数据，而不是一次性加载所有数据，从而大大减少了内存消耗。这就像你在处理一个超大的文件时，不需要一次性读入整个文件，而是可以一行一行地处理。

简化复杂的异步流程

当你需要处理多步骤的异步操作时，Async Generators 能让你的代码更加简洁易懂。比如在处理多个异步任务时，你可以使用 Async Generators 按顺序执行每个任务，并在每个任务完成后处理结果，而不需要嵌套大量的回调函数。

自定义异步可迭代对象

Async Generators 还允许你轻松创建自己的异步数据源。这对于需要定制化数据处理逻辑的场景非常有用。例如，你可以创建一个异步生成器来处理从不同API获取的数据，将它们整合到一个异步可迭代对象中。

如何使用 Async Generators

Async Generators 是处理异步操作的强大工具，使用起来也非常简单。通常，你可以使用 for await...of 循环或结合 await 的 .next() 方法来操作异步生成器。下面是一个基本的例子来演示如何使用 Async Generators：

基本示例

我们先定义一个异步生成器函数 countSlowly，它会每隔一秒钟依次生成数字 0 到 4。

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

在这个函数中，for 循环会执行五次，每次循环都会等待一秒钟（通过 setTimeout 实现的），然后生成一个数字。

接下来，我们用一个异步函数 main 来使用这个生成器，并通过 for await...of 循环来依次获取生成的值。

async function main() {
  for await (const num of countSlowly()) {
    console.log(num);
  }
}

main();

运行 main 函数时，控制台会每隔一秒钟输出一个数字，从 0 到 4，总共输出五个数字。

在真实项目中的应用

Async Generators 在处理异步操作时非常强大，尤其在一些实际业务场景中更是得心应手。下面我们来看看几个常见的实战案例。

1. 处理分页 API 请求

在处理返回大数据集并分页的 API 请求时，Async Generators 可以让这个过程变得非常流畅。

async function* fetchPaginatedResults(apiEndpoint) {
  let currentPage = 1;
  let isMoreDataAvailable = true;

  while (isMoreDataAvailable) {
    const requestUrl = `${apiEndpoint}?page=${currentPage}`;
    const response = await fetch(requestUrl);
    const result = await response.json();

    if (result.data && result.data.length > 0) {
      yield result.data;
      currentPage++;
    } else {
      isMoreDataAvailable = false;
    }
  }
}

// 使用示例
async function processAllResults() {
  const apiEndpoint = 'https://api.example.com/data';
  for await (const dataBatch of fetchPaginatedResults(apiEndpoint)) {
    for (const dataItem of dataBatch) {
      console.log(dataItem);
      // 可以在这里处理每个数据项，例如存入数据库
    }
  }
}

processAllResults();

这个异步生成器函数 fetchPaginatedResults 专为处理分页 API 响应而设计。它从一个初始 URL 开始，不断获取数据，直到没有更多页面为止。

我们以一个 apiEndpoint 开始，并用 currentPage 变量管理分页。
使用 isMoreDataAvailable 标志控制循环，初始设为 true。
每次迭代中，我们构造当前页码的完整 URL。
获取当前页的数据并解析 JSON 响应。
如果响应中有数据项，我们 yield 这些数据，并增加页码。
如果没有数据项，我们将 isMoreDataAvailable 设为 false，结束循环。

这种方法处理使用页码进行分页的 API 非常有效。

2、分块读取大文件

假设我们需要读取一个非常大的日志文件，并逐块处理它。我们可以使用 Async Generators 来实现高效的分块读取。

const fs = require('fs').promises;

async function* readLargeFileInChunks(path, size = 1024) {
  const file = await fs.open(path, 'r');
  try {
    let bytesRead = -1;
    while (bytesRead !== 0) {
      const buffer = Buffer.alloc(size);
      ({ bytesRead } = await file.read(buffer, 0, size));
      if (bytesRead !== 0) {
        yield buffer.slice(0, bytesRead);
      }
    }
  } finally {
    await file.close();
  }
}

// 使用示例
async function handleLogFile() {
  for await (const chunk of readLargeFileInChunks('path/to/large_log_file.txt')) {
    console.log(chunk.toString());
    // 在这里处理每个块，例如解析日志记录
  }
}

handleLogFile();

这个异步生成器函数 readLargeFileInChunks 分块读取文件，非常适合在处理超大文件时使用。

使用 fs.promises.open 打开文件获取文件句柄。
在 while 循环中，将文件的分块读取到缓冲区。
使用 yield 返回每个块（作为 Buffer）。
循环持续到没有更多字节读取（文件结束）。
try...finally 确保即使发生错误也会关闭文件。

在 handleLogFile 函数中，我们使用 for await...of 循环处理每个块，将其转换为字符串并打印出来。这种方法允许我们高效地处理大文件，因为在任何时候内存中只有一小部分文件。

3、管理复杂的异步工作流

假设我们有一个订单处理系统，需要按顺序执行多个异步操作，如验证订单、处理付款、准备发货和发送确认邮件。我们可以使用 Async Generators 来简化这个流程。

async function* processOrderSteps(orderId) {
  try {
    const validationResult = await validateOrder(orderId);
    yield { step: 'Validation', result: validationResult };

    const paymentResult = await processPayment(orderId);
    yield { step: 'Payment', result: paymentResult };

    const shipmentResult = await prepareShipment(orderId);
    yield { step: 'Shipment', result: shipmentResult };

    const emailResult = await sendConfirmationEmail(orderId);
    yield { step: 'Confirmation Email', result: emailResult };
  } catch (error) {
    yield { step: 'Error', error: error.message };
  }
}

// 使用示例
async function handleOrderProcessing(orderId) {
  for await (const { step, result, error } of processOrderSteps(orderId)) {
    if (error) {
      console.log(`Error in step: ${step}. ${error}`);
      break;
    }
    console.log(`Completed step: ${step}. Result: ${result}`);
  }
  console.log('Order processing complete');
}

handleOrderProcessing('12345');

这个异步生成器函数 processOrderSteps 代表一个复杂的订单处理工作流。

每个步骤（验证订单、处理付款、准备发货、发送邮件）都是一个异步操作。
函数在每个步骤完成后 yield，让调用者可以跟踪进度或在步骤之间执行额外操作。
handleOrderProcessing 函数使用 for await...of 循环迭代工作流的每个步骤。
每个步骤完成后，它会记录完成情况，从而提供订单处理进度的可见性。
添加了错误处理，通过 try-catch 块捕获错误。

潜在的缺点和陷阱

Async Generators 是处理异步任务的强大工具，但在使用过程中也会遇到一些挑战。让我们通过一些打比方来看看这些潜在的缺点和陷阱。

1. 简单任务的复杂化

想象一下，你只想泡一杯茶，但却用了全套的茶具和仪式。对于简单的异步操作，使用 Async Generators 可能显得有些过头，反而让简单的代码变得复杂。

2. 学习曲线

Async Generators 有点像学会骑自行车然后再学开车。它结合了异步编程和生成器的概念，对于初学者来说可能有点难以理解。如果你对这两个概念都不熟悉，可能需要花些时间来适应。

3. 调试困难

想象你在一个迷宫里走，每一步都需要记住来时的路。生成器的状态管理可能让调试变得更加困难，尤其是对于那些不熟悉生成器内部机制的开发者。

4. 性能开销

如果你只是需要运送一小包裹，使用一辆卡车显然是不划算的。对于小数据集或简单操作，Async Generators 可能引入一些性能开销，相比之下更简单的异步方法可能更高效。

5. 浏览器支持

这就像一些新款手机功能在老款手机上无法使用一样。虽然现代浏览器支持 Async Generators，但老旧浏览器可能不支持，需要进行转码或使用兼容插件。

6. 内存泄漏的潜在风险

如果你在家里不停地堆积东西，而不及时清理，最终可能会占满整个房间。同样，如果不正确管理，长时间运行或无限循环的生成器可能导致内存问题。

7. 回调地狱的等效问题

如果代码结构不好，Async Generators 中的深度嵌套 yield 语句可能会像回调地狱一样让代码难以维护。

8. 错误处理复杂

在处理多层 yield 时，错误传播可能变得棘手。这就像你在传递消息时，每层都可能会出现问题，处理这些问题会变得复杂。

虽然 Async Generators 强大且灵活，但它们并不是银弹。在使用时需要权衡利弊，确保它们适合你的具体场景。对于简单任务，可能更简单的异步方法更合适，而对于复杂的异步工作流，Async Generators 则可以大展身手。理解这些潜在的缺点和陷阱，可以帮助你更好地使用这一工具，避免常见的坑。