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，降低下游使用成本

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！