JavaScript Generator函数在异步流程控制中的应用

JavaScript 中的异步操作（如网络请求、文件读写）通常使用回调函数或 Promise 处理。当业务逻辑复杂时，多层嵌套会导致代码难以阅读和维护。Generator 函数提供了一种能够暂停执行和恢复执行的机制，配合 Promise，可以将异步代码写得像同步代码一样直观。

理解 Generator 函数基础

Generator 函数是 ES6 提供的一种异步编程解决方案。普通函数一旦执行就会运行到底，而 Generator 函数可以在运行过程中暂停，并在稍后恢复。

定义 一个 Generator 函数需要在 function 关键字后加一个星号 *。函数体内部使用 yield 关键字定义不同的执行状态。

1. 编写 一个简单的 Generator 函数示例。

   function* simpleGenerator() {
     console.log('第一步');
     yield; // 暂停点
     console.log('第二步');
     yield; // 暂停点
     console.log('第三步');
   }

2. 调用 该函数并不会立即执行代码，而是返回一个迭代器对象。

   const gen = simpleGenerator();

3. 使用 next() 方法来启动或恢复函数的执行。

   gen.next(); // 输出: "第一步"
   gen.next(); // 输出: "第二步"
   gen.next(); // 输出: "第三步"

核心机制：数据交换与异步控制

单纯的手动调用 next() 并不能解决异步问题。我们需要利用 yield 表达式的返回值特性，以及 next(value) 方法传递参数的能力，来实现异步流程的自动控制。

当 Generator 函数遇到 yield 时，它会暂停，并将 yield 后面的表达式结果返回给外部。外部函数处理完逻辑（如异步请求）后，通过 next(value) 将结果传回 Generator 函数内部，赋值给左边的变量。

为了理清这个数据流动的过程，请参考以下执行流程图：

实操步骤：封装一个异步流程控制器

为了不用手动调用 next()，我们需要写一个执行器函数来自动处理 Promise 和 Generator 的交互。

第一步：准备模拟的异步任务

为了演示方便，先定义两个返回 Promise 的异步函数，分别模拟获取用户数据和获取订单详情。

1. 创建 getUserData 函数，模拟延迟 1 秒后返回用户名。

   function getUserData() {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve('用户: 张三');
       }, 1000);
     });
   }

2. 创建 getOrderDetails 函数，模拟延迟 1 秒后返回订单号。

   function getOrderDetails() {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve('订单: #10086');
       }, 1000);
     });
   }

第二步：编写执行器函数

这个函数负责驱动 Generator 函数自动运行。

1. 定义 run 函数，接收一个 Generator 函数作为参数。

   function run(generatorFn) {
     // 2. 创建迭代器对象
     const gen = generatorFn();
   
     // 3. 定义递归函数 next
     function next(data) {
       // 4. 获取迭代器的下一个状态
       const result = gen.next(data);
   
       // 5. 检查是否结束
       if (result.done) return result.value;
   
       // 6. 处理返回的 Promise
       const promise = result.value;
   
       // 7. 等待 Promise resolve，并将结果传回 next，实现递归
       promise
         .then((data) => next(data))
         .catch((err) => gen.throw(err));
     }
   
     // 8. 启动执行
     next();
   }

第三步：编写业务逻辑代码

现在可以使用 yield 来像写同步代码一样编写异步流程了。

1. 定义 mainTask Generator 函数。

   function* mainTask() {
     try {
       // 等待 getUserData 完成，结果赋值给 user
       const user = yield getUserData();
       console.log(`收到: ${user}`);
   
           // 等待 getOrderDetails 完成，结果赋值给 order
           const order = yield getOrderDetails();
           console.log(`收到: ${order}`);
   
       console.log('所有流程执行完毕');
     } catch (error) {
       console.error('出错了:', error);
     }
   }

2. 调用 run 函数传入 mainTask。

   run(mainTask);

执行上述代码，控制台会依次输出（间隔 1 秒）：
收到: 用户: 张三
收到: 订单: #10086
所有流程执行完毕

方案对比与总结

通过 Generator 函数封装后的异步流程，在可读性上有了显著提升。以下是三种常见异步处理方式的对比：

核心在于 yield 将控制权移交出去，等待异步操作完成后，通过 next 的参数将数据带回。这种机制虽然不如现代的 async/await 语法简洁，但它是理解 JavaScript 异步控制流演变的重要环节，也是 async/await 的底层实现原理。