如何用Generator函数实现复杂的异步流程控制？

Generator函数通过yield暂停执行并交出控制权，外部执行器用next()恢复执行并将结果传回，从而将异步流程线性化。其优势在于避免回调地狱、实现清晰的同步式代码结构、支持try...catch统一错误处理，并可通过执行器自动推进。相比async/await，Generator更灵活，支持双向通信、手动控制迭代及自定义任务调度，适用于需精细控制的复杂场景。

Generator函数通过其独特的

yield

next()

解决方案

要用Generator函数实现复杂的异步流程控制，核心在于理解

yield

next()

一个典型的模式是，我们定义一个Generator函数，在其中使用

yield

yield

next()

例如，我们有一个模拟异步请求的函数：

function fakeFetch(url) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`Fetched data from ${url}`);
      resolve({ url, data: `Some data for ${url}` });
    }, Math.random() * 1000 + 500);
  });
}

// 我们的异步流程Generator
function* asyncFlow() {
  console.log('Step 1: Start fetching data1');
  const result1 = yield fakeFetch('https://api.example.com/data1');
  console.log('Step 2: Data1 received:', result1.data);

  console.log('Step 3: Start fetching data2 based on data1');
  const result2 = yield fakeFetch(`https://api.example.com/data2?id=${result1.data.split(' ')[2]}`);
  console.log('Step 4: Data2 received:', result2.data);

  console.log('Step 5: Process both results');
  return `Final result: ${result1.data} and ${result2.data}`;
}

然后，我们需要一个执行器来驱动这个

asyncFlow

function run(generator) {
  const it = generator(); // 获取迭代器

  function go(result) {
    if (result.done) return result.value; // Generator执行完毕，返回最终值

    return Promise.resolve(result.value).then(
      value => go(it.next(value)), // 异步操作成功，将结果传回Generator
      error => go(it.throw(error)) // 异步操作失败，将错误抛回Generator
    );
  }

  return go(it.next()); // 启动Generator
}

// 运行我们的异步流程
run(asyncFlow).then(finalResult => {
  console.log('All done! Final output:', finalResult);
}).catch(error => {
  console.error('Flow error:', error);
});

通过这种方式，原本需要层层嵌套回调或Promise

.then()

Generator函数在处理多层嵌套回调时有哪些优势？

说实话，我个人觉得Generator函数最直观、最让人眼前一亮的优势，就是它能彻底终结“回调地狱”那种让人头疼的局面。想想看，在Promise普及之前，处理多个相互依赖的异步操作，代码很快就会变成一个深度嵌套的金字塔，每一层都是一个回调函数，参数传递和错误处理简直是噩梦。

举个例子，假设我们要依次执行三个异步操作，每个操作都依赖前一个的结果：

// 回调地狱版
asyncOperation1(param1, function(err1, res1) {
  if (err1) { /* handle error */ return; }
  asyncOperation2(res1.id, function(err2, res2) {
    if (err2) { /* handle error */ return; }
    asyncOperation3(res2.token, function(err3, res3) {
      if (err3) { /* handle error */ return; }
      console.log('All done:', res3);
    });
  });
});

这种代码，别说维护了，光是看一眼都觉得眼睛疼。参数层层传递，错误处理也变得重复且易错。

AIPAI

AI视频创作智能体

下载

而用Generator函数，结合上面提到的执行器，这段逻辑会变得异常清晰：

function* sequentialAsyncFlow() {
  try {
    const res1 = yield asyncOperation1(param1);
    const res2 = yield asyncOperation2(res1.id);
    const res3 = yield asyncOperation3(res2.token);
    console.log('All done:', res3);
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

// 假设 asyncOperationX 返回 Promise
// run(sequentialAsyncFlow);

你看，代码的执行流程变得一目了然，就像我们写同步代码一样，从上到下，一步一步。

yield

try...catch

如何构建一个简易的Generator执行器（Runner）来自动化流程？

构建一个简易的Generator执行器，其实就是实现一个能自动调用

next()

yield

function co(generatorFn) {
  return new Promise((resolve, reject) => {
    const gen = generatorFn(); // 获取Generator的迭代器

    function step(nextFn) {
      let generatorResult;
      try {
        generatorResult = nextFn(); // 调用next()或throw()
      } catch (err) {
        return reject(err); // Generator内部抛出错误
      }

      const { value, done } = generatorResult;

      if (done) {
        return resolve(value); // Generator执行完毕
      }

      // 确保yield的值是一个Promise，如果不是，也包装成Promise
      Promise.resolve(value).then(
        res => {
          step(() => gen.next(res)); // Promise成功，将结果传回Generator
        },
        err => {
          step(() => gen.throw(err)); // Promise失败，将错误抛回Generator
        }
      );
    }

    step(() => gen.next(undefined)); // 启动Generator，第一次next()不带参数
  });
}

// 结合上面的asyncFlow Generator
// co(asyncFlow).then(finalResult => {
//   console.log('Co-runner finished:', finalResult);
// }).catch(error => {
//   console.error('Co-runner error:', error);
// });

这个

co

1. 初始化：它接收一个Generator函数，并立即调用它来获取一个迭代器

   gen

   。

2. step

   函数：这是核心递归函数，负责推进Generator的执行。
   • 它首先尝试调用

     nextFn()

     （可能是

     gen.next(value)

     或

     gen.throw(error)

     ）。
   • 如果

     nextFn()

     调用时Generator内部抛出错误，直接

     reject

     外部的Promise。
   • 检查

     generatorResult.done

     ：如果为

     true

     ，说明Generator已经执行完毕，此时

     generatorResult.value

     就是Generator的最终返回值，我们

     resolve

     外部的Promise。
   • 如果

     done

     为

     false

     ，说明Generator

     yield

     出了一个值。我们确保这个值是一个Promise（即使不是，

     Promise.resolve()

     也会将其包装成Promise）。
   • 然后，我们等待这个Promise解决。
     • 如果Promise成功，我们递归调用

       step

       ，并传入一个函数，这个函数会在下一次调用时执行

       gen.next(res)

       ，将Promise的结果传回Generator。
     • 如果Promise失败，我们同样递归调用

       step

       ，但这次传入

       gen.throw(err)

       ，将错误抛回Generator，让Generator内部的

       try...catch

       有机会捕获。
3. 启动：最后，通过

   step(() => gen.next(undefined))

   来启动整个流程。第一次

   next()

   通常不带参数，因为Generator刚开始执行，没有前一个

   yield

   的返回值。

这个执行器虽然简陋，但它完整地展现了Generator函数如何与外部环境协作，实现异步流程的自动化控制。理解了它，你就能明白像Koa 1.x或一些早期Node.js库是如何利用Generator来构建强大的中间件系统的。

Generator与async/await相比，其独特价值体现在哪里？

毫无疑问，

async/await

async/await

async/await

Generator的独特价值，主要体现在它更强的控制力和更广泛的适用性上：

1. 手动迭代与细粒度控制：

   async/await

   强制你

   await

   一个Promise，并且一旦

   await

   ，就必须等到Promise解决才能继续。但Generator的

   yield

   可以暂停任何值，不限于Promise。你可以

   yield

   一个普通值、一个函数、一个数组，甚至是一个自定义的“任务”对象。这意味着你可以设计更复杂的执行器，来处理各种非Promise的异步或同步任务。比如，你可以用Generator实现一个自定义的调度器，根据

   yield

   出的任务类型来决定是执行IO操作、CPU密集型计算还是等待用户输入。
2. 构建自定义控制流：

   async/await

   的流程是线性的、单向的，一旦开始就只能向前。而Generator可以被外部环境多次

   next()

   ，甚至可以根据外部输入动态调整内部逻辑。这让它非常适合构建状态机、协程或可暂停/可恢复的迭代器。例如，你可以用Generator实现一个游戏循环，每次

   yield

   出当前帧的状态，外部渲染器处理完后，再

   next()

   推进到下一帧。或者，你可以构建一个可暂停的动画序列，用户点击暂停，Generator就暂停，点击继续，就

   next()

   恢复。
3. 双向通信能力：Generator的

   next()

   方法可以接收一个参数，这个参数会成为上一个

   yield

   表达式的返回值。这意味着外部环境不仅能获取Generator

   yield

   出的值，还能将值回传给Generator内部。这种双向通信能力是

   async/await

   所不具备的。在构建一些需要外部环境反馈或注入数据的复杂流程时，Generator的这种特性就显得尤为强大。比如，你可以用它来实现一个交互式的命令行工具，

   yield

   出问题，用户输入答案后，再通过

   next(answer)

   将答案传回Generator继续处理。

虽然在日常的异步请求处理中，

async/await