JS 协程与并发模型 - 使用 Generator 实现类似 async 的执行流程

Generator通过yield暂停函数执行，将异步操作结果以Promise形式返回，由执行器接收并等待其解决后，再通过next()将结果传回，实现异步流程的同步化写法。

JS协程，尤其是通过Generator实现的那种，本质上就是一种手动控制异步流程的巧妙方式，它允许我们在JavaScript中模拟出类似同步代码的执行顺序，从而极大地简化了异步操作的复杂性，尤其是在

async/await

解决方案

要使用Generator实现类似

async

yield

next()

yield

我们首先定义一个Generator函数，里面用

yield

function* myAsyncFlow() {
    console.log('Step 1: 开始获取用户数据...');
    const userData = yield fetch('/api/users/1').then(res => res.json());
    console.log('Step 2: 用户数据获取成功:', userData.name);

    console.log('Step 3: 开始获取用户订单...');
    const orders = yield fetch(`/api/users/${userData.id}/orders`).then(res => res.json());
    console.log('Step 4: 用户订单获取成功:', orders.length, '个订单');

    return { userData, orders };
}

然后，我们需要一个执行器来驱动这个Generator。这个执行器会不断调用Generator的

next()

next()

next()

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

    function step(nextValue) {
        const { value, done } = generator.next(nextValue); // 驱动Generator

        if (done) {
            return Promise.resolve(value); // Generator执行完毕，返回最终结果
        }

        // 如果yield出来的是一个Promise，等待它解决
        return Promise.resolve(value).then(
            res => step(res), // Promise解决，将结果传回Generator
            err => generator.throw(err) // Promise拒绝，将错误抛回Generator
        );
    }

    return step(); // 启动执行
}

现在，我们就可以像这样使用它：

run(myAsyncFlow)
    .then(result => {
        console.log('所有异步操作完成，最终结果:', result);
    })
    .catch(error => {
        console.error('流程中发生错误:', error);
    });

// 模拟API
function fetch(url) {
    return new Promise(resolve => {
        setTimeout(() => {
            if (url.includes('users')) {
                resolve({
                    json: () => Promise.resolve({ id: 1, name: 'Alice' })
                });
            } else if (url.includes('orders')) {
                resolve({
                    json: () => Promise.resolve([{ id: 101, amount: 50 }, { id: 102, amount: 75 }])
                });
            }
        }, 1000);
    });
}

通过这种方式，原本需要层层嵌套回调或Promise链的代码，现在可以写成看起来像同步的、自上而下的流程，这在当时（

async/await

Generator 如何在 JavaScript 中模拟异步流程的暂停与恢复？

Generator在JavaScript中模拟异步流程的暂停与恢复，其核心机制在于

yield

next()

function*

当你第一次调用这个迭代器的

next()

yield

yield

{ value: ..., done: false }

value

yield

外部的执行器（就像我们上面写的

run

next()

yield

例如：

const result = yield somePromise;

当

somePromise

next()

result

async/await

async/await

构建一个简易的 Generator 异步执行器需要哪些核心步骤？

构建一个简易的Generator异步执行器，通常需要以下几个核心步骤，这些步骤共同构成了一个能够驱动Generator函数，并处理其内部异步操作的完整机制。

清程爱画

AI图像与视频生成平台，拥有超丰富的工作流社区和多种图像生成模式。

170

查看详情

1. 获取Generator迭代器实例： 执行器的第一步是接收一个Generator函数，并调用它来获取一个迭代器对象。例如

   const generator = generatorFunc();

   登录后复制
   。这个迭代器是执行流程的入口。

2. 定义一个递归或循环的驱动函数： 这是执行器的“心脏”。这个函数会负责不断地调用迭代器的

   next()

   登录后复制
   方法，直到Generator函数执行完毕。它通常会接收上一步

   yield

   登录后复制
   表达式的结果作为参数，以便将其传回给Generator。

3. 处理

   next()

   登录后复制
   方法的返回值： 每次调用

   generator.next(previousValue)

   登录后复制
   ，都会返回一个包含

   value

   登录后复制
   和

   done

   登录后复制
   属性的对象。
   • 检查

     done

     登录后复制
     属性： 如果

     done

     登录后复制
     为

     true

     登录后复制
     ，说明Generator函数已经执行完毕，执行器应该停止驱动，并返回Generator的最终结果。
   • 处理

     value

     登录后复制
     属性： 这是最关键的部分。如果

     value

     登录后复制
     是一个Promise（这是我们期望的异步场景），执行器需要等待这个Promise解决。

4. 等待Promise解决并传递结果： 如果

   value

   登录后复制
   是一个Promise，执行器会使用

   Promise.resolve(value).then(...)

   登录后复制
   来等待它。一旦Promise解决，它会把解决的值作为参数，再次调用驱动函数，从而将结果“注入”回Generator函数中，让它从暂停的地方继续执行。

5. 错误处理： 异步流程中错误是不可避免的。执行器需要能够捕获Promise的拒绝（rejection），并通过

   generator.throw(error)

   登录后复制
   方法将错误抛回Generator函数内部，这样Generator内部的

   try...catch

   登录后复制
   块就能捕获并处理这些错误，保持了与同步代码类似的错误处理机制。

6. 启动执行器： 最后，需要一个初始调用来启动这个驱动函数，通常不带任何参数，因为它第一次调用

   next()

   登录后复制
   时Generator还没有

   yield

   登录后复制
   过任何值。

这些步骤形成了一个闭环，使得Generator函数能够像同步代码一样，在

yield

co

Generator 实现的协程与原生 async/await 有何异同，各自适用于哪些场景？

Generator实现的协程（或者说基于Generator的异步流程控制）与原生

async/await

相同点：

• 同步化异步代码： 两者都允许开发者将异步操作写成看起来像同步的、自上而下的代码流程，极大地提升了可读性。
• 避免回调地狱： 它们都是解决多层嵌套回调问题的有效方案。
• 基于Promise：

  async/await

  登录后复制
  是基于Promise的语法糖，而Generator实现的协程通常也依赖于Promise来管理异步操作的结果和错误。

不同点：

1. 底层机制：

   • Generator协程： 更加底层和原始。它利用

     function*

     登录后复制
     和

     yield

     登录后复制
     来手动控制函数的暂停和恢复。它需要一个外部的“执行器”来驱动迭代器，处理

     yield

     登录后复制
     出的Promise。你可以把它想象成一种“手动挡”的异步控制。

   • async/await

     登录后复制
     ： 是ES2017引入的语言特性，是Promise的语法糖。

     async

     登录后复制
     函数会自动返回一个Promise，

     await

     登录后复制
     关键字则会暂停

     async

     登录后复制
     函数的执行，直到它等待的Promise解决。它自带执行器，是“自动挡”的异步控制。

2. 错误处理：

   • Generator协程： 错误处理需要执行器将Promise的拒绝通过

     generator.throw(error)

     登录后复制
     方法“注入”回Generator，然后在Generator内部使用

     try...catch

     登录后复制
     捕获。

   • async/await

     登录后复制
     ：

     await

     登录后复制
     表达式可以直接在

     try...catch

     登录后复制
     块中捕获Promise的拒绝，与同步代码的错误处理方式完全一致，更为直观和方便。

3. 灵活性与控制力：

   • Generator协程： 提供了更高的灵活性。

     yield

     登录后复制
     可以暂停任何值，不仅仅是Promise。这意味着你可以用Generator实现更复杂的控制流，比如在Redux Saga中，你可以

     yield

     登录后复制
     一个普通对象来描述一个副作用，而不是直接执行它。

   • async/await

     登录后复制
     ： 专注于处理Promise。

     await

     登录后复制
     只能等待Promise或其他thenable对象。它的设计目标就是简化异步操作，因此在处理非Promise的暂停/恢复场景时不如Generator灵活。

适用场景：

• async/await

  登录后复制
  ：
  • 绝大多数现代异步编程场景： 无论是前端的API请求、用户交互，还是后端的数据库操作、文件I/O，

    async/await

    登录后复制
    都是首选。它简洁、易用、错误处理直观，是JavaScript异步编程的“标准答案”。
  • 团队协作和维护： 由于其是语言原生特性，且约定俗成，团队成员更容易理解和维护使用

    async/await

    登录后复制
    编写的代码。

• Generator 实现的协程：

  • async/await

    登录后复制
    出现之前的过渡方案： 在

    async/await

    登录后复制
    尚未普及的ES6时代，Generator协程（如

    co

    登录后复制
    库）是解决异步流程控制的强大工具。
  • 需要精细控制流的框架或库： 某些库或框架，例如Redux Saga，利用Generator的强大灵活性来构建复杂的副作用管理机制。它们不只是等待Promise，还可能

    yield

    登录后复制
    出各种指令对象，由外部的中间件来解释执行。
  • 自定义异步抽象层： 当你需要构建一个非常规的异步流程控制机制，或者需要处理非Promise的暂停/恢复逻辑时，Generator提供了底层的能力去实现这些。

总的来说，对于日常开发，

async/await

async/await

以上就是JS 协程与并发模型 - 使用 Generator 实现类似 async 的执行流程的详细内容，更多请关注php中文网其它相关文章！