2025年9月13日中文

探索高级 JavaScript 生成器模式，包括异步迭代、状态机实现以及适用于现代 Web 开发的实际用例。

JavaScript 生成器：异步迭代与状态机的高级模式

JavaScript 生成器（在 ES6 中引入）提供了一种强大的机制，用于创建可迭代对象和管理复杂的控制流。虽然其基本用法相对简单，但生成器的真正潜力在于它们处理异步操作和实现状态机的能力。本文将深入探讨使用 JavaScript 生成器的高级模式，重点关注异步迭代和状态机实现，并提供与现代 Web 开发相关的实际示例。

理解 JavaScript 生成器

在深入探讨高级模式之前，让我们简要回顾一下 JavaScript 生成器的基础知识。

什么是生成器？

生成器是一种特殊类型的函数，它可以暂停和恢复，让您能够控制函数的执行流程。生成器使用 function* 语法定义，并使用 yield 关键字暂停执行并返回一个值。

核心概念：

function*: 表示一个生成器函数。
yield: 暂停函数执行并返回一个值。
next(): 恢复函数执行，并可选择性地将一个值传回生成器。
return(): 终止生成器并返回一个指定的值。
throw(): 在生成器函数内部抛出一个错误。

示例：

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

const generator = numberGenerator();
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 }

使用生成器进行异步迭代

生成器最强大的应用之一是处理异步操作，尤其是在处理数据流时。异步迭代允许您在数据可用时进行处理，而不会阻塞主线程。

问题所在：回调地狱与 Promise

JavaScript 中的传统异步编程通常涉及回调或 Promise。虽然 Promise 相比回调改进了代码结构，但管理复杂的异步流程仍然可能变得很麻烦。

生成器与 Promise 或 async/await 结合使用，为处理异步迭代提供了一种更清晰、更易读的方式。

异步迭代器

异步迭代器为遍历异步数据源提供了一个标准接口。它们与常规迭代器类似，但使用 Promise 来处理异步操作。

异步迭代器有一个 next() 方法，该方法返回一个 Promise，该 Promise 会解析为一个包含 value 和 done 属性的对象。

示例：

            
async function* asyncNumberGenerator() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
  yield await Promise.resolve(3);
}

async function consumeGenerator() {
  const generator = asyncNumberGenerator();
  console.log(await generator.next()); // { value: 1, done: false }
  console.log(await generator.next()); // { value: 2, done: false }
  console.log(await generator.next()); // { value: 3, done: false }
  console.log(await generator.next()); // { value: undefined, done: true }
}

consumeGenerator();

异步迭代的真实世界用例

从 API 流式传输数据： 使用分页从服务器分块获取数据。想象一个社交媒体平台，您希望分批获取帖子，以避免浏览器不堪重负。
处理大文件： 逐行读取和处理大文件，而无需将整个文件加载到内存中。这在数据分析场景中至关重要。
实时数据流： 处理来自 WebSocket 或服务器发送事件 (SSE) 流的实时数据。可以想一下实时体育比分应用。

示例：从 API 流式传输数据

让我们来看一个从使用分页的 API 获取数据的示例。我们将创建一个生成器，它会分块获取数据，直到所有数据都被检索完毕。

            
async function* paginatedDataFetcher(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;
    }

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

    page++;
  }
}

async function consumeData() {
  const dataStream = paginatedDataFetcher('https://api.example.com/data');

  for await (const item of dataStream) {
    console.log(item);
    // Process each item as it arrives
  }

  console.log('Data stream complete.');
}

consumeData();

在这个示例中：

paginatedDataFetcher 是一个异步生成器，它使用分页从 API 获取数据。
yield item 语句暂停执行并返回每个数据项。
consumeData 函数使用 for await...of 循环来异步迭代数据流。

这种方法允许您在数据可用时立即处理，使其在处理大型数据集时非常高效。

使用生成器实现状态机

生成器的另一个强大应用是实现状态机。状态机是一种计算模型，它根据输入事件在不同状态之间转换。

什么是状态机？

状态机用于为具有有限数量状态以及这些状态之间转换的系统建模。它们在软件工程中广泛用于设计复杂系统。

状态机的关键组成部分：

状态 (States): 代表系统的不同条件或模式。
事件 (Events): 触发状态之间的转换。
转换 (Transitions): 定义根据事件从一个状态移动到另一个状态的规则。

用生成器实现状态机

生成器为实现状态机提供了一种自然的方式，因为它们可以维护内部状态并根据输入事件控制执行流程。

生成器中的每个 yield 语句都可以代表一个状态，而 next() 方法可用于触发状态之间的转换。

示例：一个简单的交通信号灯状态机

让我们考虑一个简单的交通信号灯状态机，它有三个状态：RED (红灯)、YELLOW (黄灯) 和 GREEN (绿灯)。

            
function* trafficLightStateMachine() {
  let state = 'RED';

  while (true) {
    switch (state) {
      case 'RED':
        console.log('Traffic Light: RED');
        state = yield;
        break;
      case 'YELLOW':
        console.log('Traffic Light: YELLOW');
        state = yield;
        break;
      case 'GREEN':
        console.log('Traffic Light: GREEN');
        state = yield;
        break;
      default:
        console.log('Invalid State');
        state = yield;
    }
  }
}

const trafficLight = trafficLightStateMachine();
trafficLight.next(); // Initial state: RED
trafficLight.next('GREEN'); // Transition to GREEN
trafficLight.next('YELLOW'); // Transition to YELLOW
trafficLight.next('RED'); // Transition to RED

在这个示例中：

trafficLightStateMachine 是一个代表交通信号灯状态机的生成器。
state 变量保存了交通信号灯的当前状态。
yield 语句暂停执行并等待下一次状态转换。
next() 方法用于触发状态之间的转换。

高级状态机模式

1. 使用对象进行状态定义

为了使状态机更易于维护，您可以将状态定义为具有相关联操作的对象。

            
const states = {
  RED: {
    name: 'RED',
    action: () => console.log('Traffic Light: RED'),
  },
  YELLOW: {
    name: 'YELLOW',
    action: () => console.log('Traffic Light: YELLOW'),
  },
  GREEN: {
    name: 'GREEN',
    action: () => console.log('Traffic Light: GREEN'),
  },
};

function* trafficLightStateMachine() {
  let currentState = states.RED;

  while (true) {
    currentState.action();
    const nextStateName = yield;
    currentState = states[nextStateName] || currentState; // Fallback to current state if invalid
  }
}

const trafficLight = trafficLightStateMachine();
trafficLight.next(); // Initial state: RED
trafficLight.next('GREEN'); // Transition to GREEN
trafficLight.next('YELLOW'); // Transition to YELLOW
trafficLight.next('RED'); // Transition to RED

2. 通过转换处理事件

您可以根据事件定义状态之间明确的转换规则。

            
const states = {
  RED: {
    name: 'RED',
    action: () => console.log('Traffic Light: RED'),
    transitions: {
      TIMER: 'GREEN',
    },
  },
  YELLOW: {
    name: 'YELLOW',
    action: () => console.log('Traffic Light: YELLOW'),
    transitions: {
      TIMER: 'RED',
    },
  },
  GREEN: {
    name: 'GREEN',
    action: () => console.log('Traffic Light: GREEN'),
    transitions: {
      TIMER: 'YELLOW',
    },
  },
};

function* trafficLightStateMachine() {
  let currentState = states.RED;

  while (true) {
    currentState.action();
    const event = yield;
    const nextStateName = currentState.transitions[event];
    currentState = states[nextStateName] || currentState; // Fallback to current state if invalid
  }
}

const trafficLight = trafficLightStateMachine();
trafficLight.next(); // Initial state: RED

// Simulate a timer event after some time
setTimeout(() => {
  trafficLight.next('TIMER'); // Transition to GREEN
  setTimeout(() => {
    trafficLight.next('TIMER'); // Transition to YELLOW
    setTimeout(() => {
      trafficLight.next('TIMER'); // Transition to RED
    }, 2000);
  }, 5000);
}, 5000);

状态机的真实世界用例

UI 组件状态管理： 管理 UI 组件的状态，例如按钮（如 IDLE 空闲、HOVER 悬停、PRESSED 按下、DISABLED 禁用）。
工作流管理： 实现复杂的工作流程，例如订单处理或文档审批。
游戏开发： 控制游戏实体的行为（例如 IDLE 待机、WALKING 行走、ATTACKING 攻击、DEAD 死亡）。

生成器中的错误处理

在使用生成器时，错误处理至关重要，尤其是在处理异步操作或状态机时。生成器提供了使用 try...catch 块和 throw() 方法来处理错误的机制。

使用 `try...catch`

您可以在生成器函数内部使用 try...catch 块来捕获执行期间发生的错误。

            
function* errorGenerator() {
  try {
    yield 1;
    throw new Error('Something went wrong');
    yield 2; // This line will not be executed
  } catch (error) {
    console.error('Error caught:', error.message);
    yield 'Error handled';
  }
  yield 3;
}

const generator = errorGenerator();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // Error caught: Something went wrong
// { value: 'Error handled', done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

使用 `throw()`

throw() 方法允许您从外部向生成器内部抛出一个错误。

            
function* throwGenerator() {
  try {
    yield 1;
    yield 2;
  } catch (error) {
    console.error('Error caught:', error.message);
    yield 'Error handled';
  }
  yield 3;
}

const generator = throwGenerator();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.throw(new Error('External error'))); // Error caught: External error
// { value: 'Error handled', done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

异步迭代器中的错误处理

当使用异步迭代器时，您需要处理在异步操作期间可能发生的错误。

            
async function* asyncErrorGenerator() {
  try {
    yield await Promise.reject(new Error('Async error'));
  } catch (error) {
    console.error('Async error caught:', error.message);
    yield 'Async error handled';
  }
}

async function consumeGenerator() {
  const generator = asyncErrorGenerator();
  console.log(await generator.next()); // Async error caught: Async error
  // { value: 'Async error handled', done: false }
}

consumeGenerator();

使用生成器的最佳实践

为复杂的控制流使用生成器： 生成器最适合需要对函数执行流进行精细控制的场景。
将生成器与 Promise 或 async/await 结合用于异步操作： 这使您能以更同步、更易读的风格编写异步代码。
使用状态机管理复杂的状态和转换： 状态机可以帮助您以结构化和可维护的方式对复杂系统进行建模和实现。
正确处理错误： 始终在生成器内部处理错误，以防止意外行为。
保持生成器小而专注： 每个生成器都应该有一个清晰且明确定义的目标。
为您的生成器编写文档： 为您的生成器提供清晰的文档，包括其用途、输入和输出。这使得代码更易于理解和维护。

结论

JavaScript 生成器是处理异步操作和实现状态机的强大工具。通过理解异步迭代和状态机实现等高级模式，您可以编写更高效、可维护和可读性更强的代码。无论您是在从 API 流式传输数据、管理 UI 组件状态，还是实现复杂的工作流，生成器都为各种编程挑战提供了灵活而优雅的解决方案。拥抱生成器的力量，提升您的 JavaScript 开发技能，构建更健壮、可扩展的应用程序。