统一响应格式是前提，约定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 分类提示
例如：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(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
}
})
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
