async/await防腐拦截层的核心是用同步写法落地请求校验、异常兜底、幂等控制与响应标准化：通过顶层async函数gatewayRequest串行执行各环节，统一try/catch捕获错误，pending缓存复用Promise防重，响应后同步提纯数据并返回业务结果。
直接用 async/await 写防腐拦截层，核心不是“语法有多炫”，而是把「请求前校验、异常兜底、幂等控制、响应标准化」这几件事用同步感的写法稳稳落地。它不增加新能力，但让逻辑链清晰、错误可捕获、扩展有边界。
拦截层结构：用 async 函数封装统一入口
把网关逻辑收束到一个顶层 async 函数里，比如 gatewayRequest，它接收原始请求配置，返回标准化响应或抛出业务错误：
- 函数本身标记为 async，天然返回 Promise，便于上层统一 .then/.catch 或 await 调用
- 内部按顺序执行：参数预检 → 权限/签名验证 → 防重放/防刷 → 实际 fetch → 响应解包 → 错误归一化
- 每一步都用 await 等待，但实际是串行 Promise 链，不会阻塞主线程
错误处理：用 try/catch 捕获全链路异常
防腐的关键是不让底层错误穿透到业务层。所有异步环节（包括校验失败、网络超时、服务端 5xx）都应在 gatewayRequest 内消化：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 外部调用者只需处理一种错误类型，比如统一的 GatewayError 类
- fetch 失败、JSON 解析失败、业务 code !== 0，全部用 throw new GatewayError(...) 主动抛出
- 避免在每个 await 后写 .catch —— 那会割裂逻辑；统一用外层 try/catch 包裹整个流程
防重复请求：用 pending 缓存 + Promise 引用复用
对相同参数的请求，在 pending 状态下直接复用已有 Promise，而不是发起新请求：
立即学习“前端免费学习笔记（深入）”；
- 用 Map 或 WeakMap 缓存 key → Promise 映射，key 可基于 URL + JSON.stringify(params)
- 请求发起前先查缓存，命中则 await 该 Promise；未命中则发起新请求，并存入缓存
- 请求结束后主动清理缓存（尤其对 POST 等非幂等操作），避免内存泄漏
响应标准化：await 后直接加工，不依赖 then 链
拿到原始响应后，立刻用同步方式做字段提取、code 判断、data 提纯：
- 例如：const res = await fetch(...); const json = await res.json(); if (json.code !== 0) throw new GatewayError(...); return json.data;
- 避免把数据转换逻辑分散在多个 .then 中，保持单点责任清晰
- 返回值始终是业务数据（如 user info），不是 raw response 或 Promise，降低下游使用成本
