使用Generator函数处理异步流程_js异步编程

Generator函数是ES6引入的可通过yield暂停执行的特殊函数，返回迭代器对象；通过结合Promise与自动执行器，可实现类似async/await的同步化异步处理模式，是理解JavaScript异步演进的重要基础。

在 JavaScript 异步编程中，Generator 函数提供了一种更直观、同步化的方式来处理异步操作。虽然现在更多使用 async/await，但 Generator 是理解现代异步语法演进的重要基础。

什么是 Generator 函数？

Generator 是 ES6 引入的一种特殊函数，可以通过 function* 定义，内部使用 yield 暂停执行，外部通过调用 next() 方法逐步推进。它返回一个可迭代的 Iterator 对象。

基本语法：

function* myGenerator() {
  yield ‘第一步’;
  yield ‘第二步’;
  return ‘结束’;
}

用 Generator 处理异步任务

Generator 的最大优势是能“暂停”函数执行，等异步结果返回后再继续。结合 Promise 和一个自动执行器，可以实现类似 async/await 的效果。

示例：模拟一个异步请求

function request(url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`数据来自 ${url}`);
    }, 1000);
  });
}

使用 Generator 封装异步流程：

function* asyncFlow() {
  const data1 = yield request(‘/api/user’);
  console.log(data1);

  const data2 = yield request(‘/api/posts’);
  console.log(data2);
}

实现自动执行器（Runner）

手动调用 next() 不现实，需要一个函数自动处理 yield 返回的 Promise，并将结果传回给上一个 yield。

豆包AI编程

豆包推出的AI编程助手

483

查看详情

简单实现：

function run(generatorFunc) {
  const iter = generatorFunc();

  next();
}

运行异步流程：

run(asyncFlow);

输出：
数据来自 /api/user
数据来自 /api/posts

Generator + Promise 的意义

这种模式让异步代码看起来像同步，逻辑清晰，避免回调地狱。它本质上是 协程（coroutine） 的实现方式，为后来的 async/await 提供了设计思路。

async/await 实际上就是 Generator + 自动执行器的语法糖，只不过内置了对 Promise 的支持。

基本上就这些。虽然现在不常手写 Generator 来处理异步，但理解它的机制有助于深入掌握 JavaScript 的异步执行模型。