Generator 机制天然适合作为协程接口,通过 yield 显式交出控制权,由外部执行器统一管理子应用生命周期,实现可预测、可中断、可审计的跨应用异步协调。

Generator 机制本身不提供协程调度能力,但它天然适合作为“协程接口”——用 yield 显式交出控制权,把执行时机、错误流向、分支决策交给外部执行器统一管理。在微前端中,这恰好能解耦主应用与子应用的生命周期耦合,避免硬编码等待、轮询或事件监听,实现真正可预测、可中断、可审计的跨应用异步控制。
把子应用加载、挂载、卸载建模为 yieldable 单元
每个子应用的生命周期阶段(如 load、bootstrap、mount、unmount)都封装为返回 Promise 的函数,并统一作为 yield 表达式出现在 Generator 中。不直接调用,也不手动 .then;而是让执行器按需触发、捕获结果、决定下一步。
- 例如:
yield loadApp('cart')→ 执行器拿到 Promise,resolve 后传回 { status: 'success', instance: CartApp },再自动调用next() - 失败时执行器可统一 throw 错误,由外层 try/catch 捕获,触发降级逻辑(如显示兜底页、切换备用子应用)
- 子应用若支持热更新,其 reload 接口也可 yield:
yield cartApp.reload(),保持语义一致
用 Generator 统一协调多子应用的并行/串行依赖
主应用常需按顺序启动核心子应用(如 auth → layout → dashboard),或并行加载非关键模块(如 analytics、chat)。Generator 可自然表达这种混合流程,无需额外状态机。
- 串行:依次 yield 多个子应用初始化函数,天然保证前序完成才进入后序
- 并行:
yield Promise.all([loadApp('header'), loadApp('sidebar')]),执行器自动等待全部 resolve,结果数组按序传入 next - 动态分支:
yield { type: 'role_gate', payload: userInfo },执行器查权限表,决定 yield mountApp('admin-panel') 还是 mountApp('user-dashboard')
生命周期钩子注入与横切能力复用
微前端常需在所有子应用 mount 前注入全局样式、埋点 SDK、权限上下文。这些不该散落在各子应用内部,而应由主应用统一注入——Generator + 执行器正是理想载体。
立即学习“前端免费学习笔记(深入)”;
- 执行器可在每次
next()前自动注入 traceId、timeout 控制、日志标记 - 例如:执行器拦截到
yield mountApp('order'),先执行injectAuthContext()和startTiming('order-mount'),再真正调用 mount - 所有子应用生命周期函数无需感知这些横切逻辑,保持纯净业务语义
轻量执行器适配不同微前端框架
不用引入 co 或 redux-saga 等重型方案。一个约 30 行的 runMicroLifecycle 执行器即可覆盖 qiankun、single-spa、micro-app 等主流框架:
- 接收 Generator 函数和初始参数(如 activeApps、baseRoute)
- 自动识别 yield 值类型:Promise → .then/.catch;对象 → 查路由映射表;数组 → 并行执行
- 对 callback 形式的老子应用(如 legacy AngularJS 子应用),用
yield new Promise(r => legacyBootstrap(cb => r(cb)))封装 - 暴露
abort()方法,支持用户跳转时主动中断未完成的 yield 链(如取消正在加载的报表子应用)


















