javascript中生成器函数如何使用_它如何简化异步流程_技术教程

生成器函数通过yield暂停恢复执行，为异步流程管理提供基础，虽被async/await取代，但在协程状态机、redux-saga等高级场景仍有价值。

JavaScript 中的生成器函数（Generator Function）本身并不直接处理异步操作，但它通过 yield 暂停和恢复执行的特性，为手动或配合工具库（如 co、redux-saga）管理异步流程提供了强大基础。现代开发中虽被 async/await 大量取代，但理解它有助于深入掌握控制流机制和某些高级场景（如协程式状态机、中间件流）。

生成器函数的基本用法：定义与执行

生成器函数用 function* 声明，返回一个迭代器对象；调用 next() 方法可逐步执行到下一个 yield 表达式，并获取其值。

示例：

function* countDown(n) {
  while (n > 0) {
    yield n;
    n--;
  }
  return 'done';
}
const iterator = countDown(3);
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 'done', done: true }

用生成器模拟异步流程：手动驱动 + Promise

生成器不自动等待 Promise，但你可以手动捕获 yield 出的 Promise，在 then 中继续调用 next，从而实现“暂停等待异步结果”的效果。

核心思路是写一个“执行器”（runner），递归处理每个 yield 返回的 Promise：

调用 gen.next(value) 获取下一步的 {value, done}
若 value 是 Promise，用 .then(res => runner(res)) 继续执行
若 done 为 true，结束流程

简化版执行器示例：

function run(genFn) {
  const gen = genFn();
  function next(data) {
    const result = gen.next(data);
    if (result.done) return result.value;
    result.value.then(next);
  }
  next();
}
// 使用
function* fetchUser() {
const res = yield fetch('/api/user');
const user = yield res.json();
console.log(user.name);
}
run(fetchUser);