前端通过响应拦截器统一映射后端错误码为可读文案并触发语义化行为,基于结构化字典管理、支持环境区分、多语言、调试模式及与异常链路深度集成。

前端实现接口错误码统一映射与文案转换,核心是把后端返回的业务错误码(如 40012、50031)在响应拦截阶段识别出来,查表转成可读提示,并按语义触发对应行为(如跳登录、弹窗、静默重试)。不依赖后端改代码,也不靠 if-else 散落各处。
定义结构化错误码字典
用常量对象集中管理所有错误码及其语义信息,避免字符串硬编码:
- 每个 key 是数字错误码(建议字符串键以兼容前导零),值包含
message、level('error'/'warn'/'info')、action(如 'redirect_login'、'retry'、'ignore') - 支持嵌套模块分类,例如:
{ '20010': { message: '用户未登录', action: 'redirect_login' }, '30021': { message: '库存不足', level: 'warn' } } - 预留 fallback 机制:查不到时返回通用提示,并上报日志(便于发现漏配)
在响应拦截器中完成映射与分发
利用 Axios 或 Fetch 拦截器,在拿到响应数据后立即解析 code 字段,查字典并执行动作:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 先判断 HTTP 状态码是否为 200;非 200(如 502/401)走网络层错误通道,不进业务码映射
- 对 200 响应,提取 data.code,查字典获取文案和行为策略
- 根据
action自动处理:调用router.push('/login')、Message.error(msg)、或直接throw new Error(msg)进入 catch 流程
支持运行时动态加载与环境区分
错误文案可能随语言、灰度环境、版本变化,需保留扩展性:
- 开发环境可启用「错误码调试模式」:控制台高亮打印原始 code + 映射结果,点击可跳转配置文件
- 多语言场景下,字典按 locale 分片(
zh-CN/errorMap.js、en-US/errorMap.js),按需 import - 允许部分错误码在测试环境显示详细原因(如
"code: 40012, reason: token expired"),生产环境仅显示友好文案
与前端异常流深度集成
映射后的错误要能自然融入现有错误处理链路,而非另起一套:
- 将转换后的错误包装为自定义 Error 类(如
ApiBusinessError),带code、message、action属性,方便上层catch识别 - 配合全局错误边界(React 的
ErrorBoundary或 Vue 的errorCaptured)捕获未处理的业务错误,兜底展示友好页面 - 对需上报的错误,自动附加当前 URL、请求路径、设备 UA、时间戳,便于问题归因
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










