统一响应格式是前提，约定status/code/message/data结构；响应拦截器分层判断网络异常与业务异常；用映射表管理code→提示文案，支持静默控制与动态提示类型。
统一处理不同状态码对应的业务异常提示，关键不是“写一堆 if-else”，而是把后端返回的业务结构和前端提示逻辑解耦，让提示行为可配置、可复用、不重复。
明确后端统一响应格式
这是前提。如果后端返回结构不一致（比如有的接口用 code，有的用 resultCode，有的直接抛 error 字段），前端就很难统一处理。推荐约定一个标准格式，例如：
- status: boolean —— 表示整体请求是否成功（true = 成功）
- code: string/number —— 业务状态码（如 "200"、"401"、"5003"）
- message: string —— 提示文案（优先展示这个）
- data: any —— 实际业务数据
这样，所有接口返回的数据结构一致，后续拦截器才能稳定提取信息。
在响应拦截器里做分层判断
不要只看 HTTP 状态码（如 404、500），更要解析业务 code。典型做法是两层判断：
立即学习“前端免费学习笔记（深入）”；
- 先检查 response.status !== 200 → 属于网络或服务异常，走通用错误提示（如“网络连接失败”）
- 再检查 response.data.code !== '200' 或 !response.data.status → 属于业务异常，按 code 分类提示
例如：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
if (response.data.code === '401') {
// 清除 token，跳转登录页
localStorage.removeItem('token')
router.push('/login')
} else if (response.data.code === '403') {
ElMessage.error('权限不足，请联系管理员')
} else if (response.data.code === '5003') {
ElMessage.warning('库存不足，无法下单')
} else {
ElMessage.error(response.data.message || '操作失败')
}
用映射表管理 code → 提示文案
避免在拦截器里堆砌 if-else。建议抽离一个提示映射对象，集中维护：
const BUSINESS_MSG_MAP = {
'401': '登录已过期，请重新登录',
'403': '当前账号无此操作权限',
'5001': '手机号已被注册',
'5003': '库存不足，请稍后再试',
'9999': '系统繁忙，请稍候重试'
}
// 在响应拦截器中使用：
const msg = BUSINESS_MSG_MAP[response.data.code] || response.data.message
ElMessage.error(msg)
好处是：新增业务码时只需改映射表，不碰核心逻辑；团队协作时提示语统一可控；也方便做多语言适配。
支持动态提示与静默控制
不是所有业务异常都要弹窗。有些场景需要静默处理（比如表单校验失败只显示红字提示），可在请求 config 中加标识：
- 发送请求时传 showMessage: false，拦截器跳过 ElMessage
- 或约定特定 code（如 "1001"）表示“仅需前端处理，不提示用户”
- 还可扩展支持 message 类型（error/warning/info）、自动关闭时间、是否居中等
示例调用：
api.login({ username, password }).catch(err => {
// 某些错误由组件自己处理，不走全局提示
if (err.response?.data?.code === '1002') {
this.$refs.form.setFields({ password: { validateStatus: 'error', errorMsg: '密码格式不正确' } })
return
}
})
不复杂但容易忽略
