使用Generator函数处理异步流程_js异步编程-js教程-PHP中文网

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

夢幻星辰

发布： 2025-11-04 22:33:02

原创

457人浏览过

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

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

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

什么是 Generator 函数？

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

基本语法：

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

const iter = myGenerator();
iter.next(); // { value: '第一步', done: false }
iter.next(); // { value: '第二步', done: false }
iter.next(); // { value: '结束', done: true }

用 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();

  function next(value) {
    const result = iter.next(value);
    if (result.done) return;

    result.value.then(next);
  }

  next();
}

运行异步流程：

run(asyncFlow);

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