当前位置：首页 > 文章列表 > 文章 > 前端 > 生成器函数实现同步异步高效复用方法

生成器函数实现同步异步高效复用方法

2026-02-05 18:30:37 0浏览收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《标题：如何通过生成器函数实现同步与异步逻辑的高效复用》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

标题：如何通过生成器函数实现同步与异步逻辑的高效复用

本文介绍使用生成器函数（Generator）抽象公共迭代逻辑，使同一核心算法既能以同步方式运行，也能无缝适配异步回调，显著减少重复代码和维护成本。

在实际开发中，我们常遇到这样一类问题：一段核心业务逻辑（如正则匹配遍历、数据流处理、状态机推进等）既需要同步执行（用于服务端预渲染、单元测试或轻量计算），又需支持异步变体（如调用 API、读取文件或等待数据库响应）。若为两者分别编写几乎相同的循环结构，不仅违反 DRY 原则，还极易因漏改一处导致行为不一致。

上述示例中，regExpSync 与 regExpAsync 的差异仅在于 fn(res) 是否被 await，其余控制流（定位更新、匹配循环、提前退出）完全一致。理想解法是将“可迭代过程”与“执行模式”解耦——这正是生成器函数（function*）的天然优势。

✅ 推荐方案：生成器 + 迭代器驱动

首先，提取纯同步、无副作用的匹配逻辑为生成器：

function* regExp(str, pat) {
  let loc = 0;
  let res;
  while ((res = pat.exec(str.substring(loc)))) {
    yield res; // 每次产出一个匹配结果
    loc += res.length + res.index;
  }
}

该生成器不关心 fn 是同步还是异步，只负责按序产出匹配项。后续只需用不同“驱动器”消费它：

// 同步版本：直接 for...of 遍历
function regExpSync(str, pat, fn) {
  for (const res of regExp(str, pat)) {
    const rtn = fn(res);
    if (rtn) return rtn;
  }
}

// 异步版本：同样 for...of，但 await 回调
async function regExpAsync(str, pat, fn) {
  for (const res of regExp(str, pat)) {
    const rtn = await fn(res);
    if (rtn) return rtn;
  }
}

✅ 优势明显：

核心循环逻辑（regExp）唯一定义、一次维护；
同步/异步入口函数体积极小，语义清晰；
可自由组合其他迭代器方法（如 Array.from(regExp(...)) 收集全部结果）。

? 进阶：统一入口 + 自动模式识别（可选）

若项目中需大量此类函数，还可进一步封装为通用执行器。利用 yield 暂停特性，让生成器主动“请求”回调执行结果：

function* regExpDriver(str, pat, fn) {
  let loc = 0;
  let res;
  while ((res = pat.exec(str.substring(loc)))) {
    const rtn = yield fn(res); // 暂停，等待 fn 执行结果
    if (rtn) return rtn;
    loc += res.length + res.index;
  }
}

// 同步执行器：忽略 yield 值，立即传回
function syncRun(genFn) {
  return function (...args) {
    const gen = genFn(...args);
    let result = gen.next();
    while (!result.done) result = gen.next(result.value);
    return result.value;
  };
}

// 异步执行器：await yield 出的 Promise，再传回结果
function asyncRun(genFn) {
  return async function (...args) {
    const gen = genFn(...args);
    let result = gen.next();
    while (!result.done) {
      result = await Promise.resolve(result.value)
        .then(val => gen.next(val))
        .catch(err => gen.throw(err));
    }
    return result.value;
  };
}

// 统一暴露
const regExpSync = syncRun(regExpDriver);
const regExpAsync = asyncRun(regExpDriver);

⚠️ 注意事项：

syncRun 中 Promise.resolve(result.value) 确保能安全处理同步值（避免 TypeError: Cannot read property 'then' of undefined）；
asyncRun 的 .catch() 处理了异步 fn 抛出错误并正确传递给生成器（gen.throw()）；
此方案适用于逻辑复杂、暂停点明确的场景；简单用例推荐前一种更直观的 for...of 方式。

? 补充：利用现代迭代器辅助方法（ES2024+）

若目标环境支持 Iterator Helpers（Chrome 128+、Node.js 22+），可进一步简化：

// 同步：利用 some() 短路特性
const regExpSync = (str, pat, fn) => [...regExp(str, pat)].some(fn);

// 异步：需配合 AsyncIterator（暂未原生支持，可用 polyfill 或手写）
const regExpAsync = async (str, pat, fn) => {
  for await (const res of AsyncIterator.from(regExp(str, pat))) {
    if (await fn(res)) return true;
  }
  return false;
};