闭包是构建轻量可组合前端拦截层的自然选择，通过函数嵌套与参数传递实现洋葱模型；中间件形如(req, next) => response，需显式return响应、支持预处理与后置包装，并用pipe调度器递归组装调用链。

闭包是构建轻量、可组合前端拦截层的自然选择——它不依赖类或生命周期管理，靠函数嵌套和参数传递就能实现洋葱模型的请求/响应双向控制。关键在于把每个中间件写成接收 req 和 next 的函数，并确保调用链能正确收口。

闭包中间件的基本签名与执行逻辑

每个中间件应是一个形如 (req, next) => response 的函数：

• req 是统一结构的请求对象（比如包含 url、headers、body、method 等字段的普通对象）
• next 是下一个中间件或最终处理器，调用它才继续流程；不调用即中断
• 必须显式 return 响应值（如 { status: 200, body: 'ok' }），否则链会断在 undefined
• 可以在 next(req) 前修改 req（预处理），也可以对 next(req) 的返回值做处理（后置包装）

手写 pipe 调度器实现洋葱模型

调度器负责把多个闭包中间件组装成递归调用链，让“进”和“出”的逻辑对称执行：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

• 将中间件数组反转，使第一个注册的处于调用栈最外层
• 构造初始 next：若中间件栈为空，则返回默认响应（如 { status: 404 }）
• 每次调用都弹出一个中间件并执行，传入当前 req 和新生成的 next
• 任意中间件中直接 return 响应对象，即可跳过后续所有中间件和业务逻辑

常见拦截场景的闭包写法

无需框架，几行闭包就能覆盖高频需求：

立即学习“前端免费学习笔记（深入）”；

• Token 鉴权：从 req.headers.Authorization 提取 token，校验失败则 return { status: 401, body: 'Unauthorized' }
• 请求日志：打印 req.url 和 req.method，然后 return next(req)
• 响应头注入：拿到 next(req) 结果后，添加 headers: { 'X-Frame-Options': 'DENY' } 再返回
• Body 转换：对 req.body 做 JSON 解析或字段清洗，再传给 next

与真实请求流对接的注意事项

闭包拦截层要真正起作用，需和 fetch 或 axios 等客户端请求机制桥接：

• 可在 fetch 包装函数中，把原始 URL 和配置构造成 req 对象，再交给中间件链处理
• 最终响应对象需转为合法的 Response 实例（用 new Response(body, { status })）才能被浏览器识别
• 错误不能只 throw，而应统一收束为带 status 和 message 的响应对象，避免未捕获异常
• 异步操作（如 token 刷新）需在闭包内用 async/await，并确保 next 也返回 Promise