别再用Generator“强行”模拟Async了！解锁它的5大进阶用法

在JavaScript异步编程的演进历程中，Generator函数曾因能通过yield暂停执行流，被早期开发者用于模拟async/await的协程模式。但随着ES2017原生async/await的普及，这种“曲线救国”的方案已逐渐失去必要性。然而，Generator的设计初衷远不止于此——它作为ES6引入的惰性迭代协议实现，在状态管理、数据流控制、协程调度等场景中仍具有不可替代的价值。本文将通过5个核心场景，揭示Generator被低估的潜力。

一、从“模拟Async”到“原生迭代协议”：Generator的本质回归

早期开发者通过co库或手动next()调用，将Generator改造成异步流程控制工具。例如：

function* asyncTask() {
  const data = yield fetch('https://api.example.com');
  console.log(data);
}
// 模拟async/await的调用方式（已过时）
const gen = asyncTask();
gen.next().value.then(res => gen.next(res));

这种模式虽巧妙，但存在两大缺陷：

1. 语义混淆：Generator的yield本用于值交换，强行用于异步控制会破坏代码可读性
2. 冗余中间层：async/await已通过Promise链+语法糖实现更清晰的异步流程

现代开发中，Generator应回归其作为迭代器生成器的核心定位。通过实现[Symbol.iterator]协议，它能高效处理大规模数据流：

function* createRangeIterator(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}
const iterator = createRangeIterator(1, 3);
for (const num of iterator) {
  console.log(num); // 依次输出1, 2, 3
}

二、状态机管理：用Generator实现零耦合流程控制

Generator的暂停/恢复特性使其成为实现有限状态机（FSM）的天然工具。考虑一个订单处理系统：

const ORDER_STATES = {
  CREATED: 'created',
  PAID: 'paid',
  SHIPPED: 'shipped',
  COMPLETED: 'completed'
};
function* orderStateMachine(initialState) {
  let currentState = initialState;
  while (true) {
    switch (currentState) {
      case ORDER_STATES.CREATED:
        const payment = yield { action: 'await_payment' };
        if (payment.success) currentState = ORDER_STATES.PAID;
        break;
      case ORDER_STATES.PAID:
        yield { action: 'ship_order' };
        currentState = ORDER_STATES.SHIPPED;
        break;
      // ...其他状态处理
    }
  }
}
// 使用示例
const order = orderStateMachine(ORDER_STATES.CREATED);
order.next(); // 初始调用不处理值
const paymentResult = { success: true };
order.next(paymentResult); // 触发状态转移

这种实现方式相比传统状态机模式（如对象字面量+switch）具有三大优势：

1. 状态逻辑集中：所有状态转移规则封装在Generator内部
2. 上下文持久化：通过闭包保存currentState，无需外部变量
3. 可测试性增强：可通过next()精确控制状态流转

三、惰性求值：处理无限序列的优雅方案

Generator的惰性特性使其成为处理无限数据流的理想选择。对比立即求值的数组：

// 危险！会耗尽内存
const infiniteArray = Array.from({ length: Infinity }, (_, i) => i);
// 安全！Generator按需生成值
function* infiniteSequence() {
  let i = 0;
  while (true) {
    yield i++;
  }
}
const gen = infiniteSequence();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
// ...可无限调用

在实际场景中，这种特性可用于：

1. 分页加载：按需生成下一页数据

   function* createPaginatedData(pageSize, totalItems) {
   let offset = 0;
   while (offset < totalItems) {
    yield fetchData({ offset, limit: pageSize });
    offset += pageSize;
   }
   }

2. 数学序列生成：如斐波那契数列

   function* fibonacci() {
   let [prev, curr] = [0, 1];
   while (true) {
    yield prev;
    [prev, curr] = [curr, prev + curr];
   }
   }

四、协程调度：实现轻量级并发控制

虽然JavaScript是单线程的，但Generator可通过协程模式模拟并发执行。考虑一个需要并行处理多个任务的场景：

function* task1() {
  console.log('Task1 start');
  yield new Promise(resolve => setTimeout(resolve, 1000));
  console.log('Task1 end');
}
function* task2() {
  console.log('Task2 start');
  yield new Promise(resolve => setTimeout(resolve, 500));
  console.log('Task2 end');
}
function runCoroutines(generators) {
  const tasks = generators.map(gen => ({
    iterator: gen(),
    done: false
  }));
  function step() {
    const activeTasks = tasks.filter(t => !t.done);
    if (activeTasks.length === 0) return;
    activeTasks.forEach(task => {
      const { value, done } = task.iterator.next();
      task.done = done;
      if (value instanceof Promise) {
        value.then(() => {
          task.done = false; // 恢复任务
          step(); // 继续调度
        });
      }
    });
    // 非阻塞调度
    setTimeout(step, 0);
  }
  step();
}
runCoroutines([task1, task2]);
// 输出顺序：Task1 start -> Task2 start -> Task2 end -> Task1 end

这种模式相比直接使用Promise.all具有更细粒度的控制能力，特别适用于需要按顺序执行依赖任务或限制并发数的场景。

五、可中断计算：实现安全的资源密集型操作

对于CPU密集型任务，Generator可提供手动中断能力，避免阻塞主线程。考虑一个大数据处理场景：

function* processLargeData(dataChunkSize) {
  let processed = 0;
  const total = 1e6; // 100万条数据
  while (processed < total) {
    const chunk = data.slice(processed, processed + dataChunkSize);
    // 模拟耗时计算
    const result = heavyComputation(chunk);
    yield result;
    processed += dataChunkSize;
    // 可通过外部控制中断
    if (shouldCancel) {
      console.log('Processing cancelled');
      return;
    }
  }
}
// 调用方可通过generator.return()中断
const processor = processLargeData(1000);
let currentResult;
while (!(currentResult = processor.next()).done) {
  if (userCancelled) {
    processor.return(); // 安全中断
    break;
  }
  // 处理当前结果
}

这种模式在以下场景特别有用：

1. Web Worker替代方案：在主线程中分块处理大数据
2. 用户操作取消：如搜索建议、图片处理等可中断操作
3. 内存管理：避免一次性加载全部数据导致OOM

最佳实践建议

1. 明确使用场景：优先在需要惰性求值、状态管理或协程控制的场景使用Generator
2. 避免过度设计：简单迭代使用数组方法更直观
3. 结合async/await：在Generator内部处理异步操作时，可混用async函数

   function* asyncGenerator() {
   const data = yield fetchData(); // 这里的yield返回Promise
   // 实际需要外部调用方处理Promise
   }
   // 更推荐的方式
   async function* asyncGenerator() {
   const data = await fetchData();
   yield data; // 直接返回解包后的值
   }

4. TypeScript支持：为Generator添加类型标注提升可维护性

   function* numberGenerator(): Generator<number, void, unknown> {
   yield 1;
   yield 2;
   }

结语：超越异步，探索Generator的完整潜力

从ES6诞生至今，Generator函数始终是一个被低估的特性。当开发者停止将其视为async/await的替代品，转而挖掘其在迭代协议、状态管理、惰性计算等领域的原生能力时，会发现它能为代码带来前所未有的表达力和控制力。特别是在处理流式数据、复杂状态机或需要中断的计算任务时，Generator往往是比手动实现迭代器或状态模式更简洁、更安全的解决方案。

未来随着JavaScript生态对数据流和状态管理的需求持续增长，Generator及其衍生模式（如Async Generator）将在Serverless函数、实时数据处理、游戏AI等场景中发挥更大价值。理解并掌握这些高级用法，将帮助开发者在复杂系统设计中找到更优雅的实现路径。