Generator是JavaScript原生协程机制，具备可控暂停、状态保持、双向通信能力，适合构建前端防腐层业务原语；通过yield划清数据边界、next(value)实现上下文注入、throw统一错误路由、yield*委托复用，实现高局部性、可拦截、可降级的横切逻辑封装。
Generator 本身不是“语法糖”，而是 JavaScript 提供的原生协程机制；async/await 才是基于 Promise + Generator 的语法糖。但正因 Generator 具备可控暂停、状态保持、双向通信三大能力，它天然适合构建高局部性、可拦截、可降级的前端防腐层业务原语——即把“数据校验、权限过滤、错误兜底、灰度分流”等横切逻辑，封装成一个个职责清晰、边界明确、可组合复用的 yield 单元。
用 yield 划清数据边界：每个单元只声明自己需要的输入与契约
高局部性原则要求“相关联的数据和逻辑必须放在一起”。Generator 的每次 yield 就是一个天然的逻辑边界点：
- 每个 yield 前只处理当前步骤所需的最小数据（如仅校验 token 是否过期，不碰用户 profile）
- yield 返回值统一为 { type: 'CHECK_AUTH', payload: { valid: true, role: 'admin' } }，不返回裸布尔或混合结构
- 输入参数在 generator 函数签名中显式声明（如 function* authGuard({ token, endpoint })），禁止从闭包或全局读取
用 next(value) 实现上下文注入：让拦截逻辑可配置、可覆盖
防腐层必须支持运行时动态干预。Generator 的 next(value) 能力正好满足：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 首次调用 next() 触发初始校验（如检查 localStorage 中的 session）
- 后续调用 next({ override: true, mockData: {...} }) 可跳过真实请求，注入模拟结果
- 权限拦截器收到 next({ userRole: 'guest' }) 后，自动切换渲染策略，无需修改内部逻辑
用 throw(error) 统一错误路由：把崩溃转为可控降级路径
传统中间件容易因未捕获异常而中断整条链。Generator 的 throw 方法提供了标准错误入口：
立即学习“前端免费学习笔记（深入）”；
- 在 yield 前后加 try/catch，捕获网络超时、schema 不匹配等具体错误
- throw new ValidationError('missing field: email') → 拦截器 yield { type: 'VALIDATION_ERROR', fallback: renderEmptyForm }
- 外部执行器统一 catch 并决策：重试、跳过、替换为兜底组件，而非让整个页面白屏
用 yield* 委托复用：把防腐能力拆成可插拔模块
避免重复写“鉴权 → 日志 → 熔断 → 请求”的长链。用 yield* 把原子能力委托出去：
- function* apiCall(...){ yield* authGuard(); yield* rateLimiter(); yield* safeFetch(...) }
- authGuard、rateLimiter 各自维护独立状态（如 token 刷新次数、滑动窗口计数），互不污染
- 业务侧只需 import { authGuard } from '@core/guards'，按需组合，不引入冗余逻辑
