Axios 拦截器封装模式
Axios 请求拦截与统一错误处理封装模式
#tech / dev / frontend
#type / concept
#status / evergreen
Axios 拦截器封装模式
前端 HTTP 请求拦截与统一错误处理的最佳实践
Axios 拦截器封装
// utils/request.ts
import axios, { AxiosError, AxiosResponse } from 'axios'
import { useMessage } from '@/composables/useMessage'
const message = useMessage()
// 创建实例
const request = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL,
timeout: 30000,
})
// 请求拦截器
request.interceptors.request.use(
(config) => {
// 自动添加 token
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
// 显示全局 loading（可选）
if (config.showLoading !== false) {
// showLoadingIndicator()
}
return config
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截器
request.interceptors.response.use(
(response: AxiosResponse<ApiResponse>) => {
// 隐藏 loading
// hideLoadingIndicator()
const res = response.data
// 根据后端约定的 code 判断
if (res.code === 2000) {
return res // 成功直接返回
}
// 业务错误统一提示
message.error(res.message || '请求失败')
return Promise.reject(new Error(res.message))
},
(error: AxiosError<ApiResponse>) => {
// hideLoadingIndicator()
// HTTP 错误统一处理
if (error.response) {
const { status, data } = error.response
switch (status) {
case 401:
message.error('登录已过期，请重新登录')
// 跳转到登录页
router.push('/login')
break
case 403:
message.error('没有权限访问')
break
case 404:
message.error('请求的资源不存在')
break
case 500:
message.error('服务器错误')
break
default:
message.error(data?.message || '网络错误')
}
} else if (error.request) {
message.error('网络连接失败，请检查网络')
} else {
message.error('请求配置错误')
}
return Promise.reject(error)
}
)
export default request优雅之处：
- 统一处理 token、loading、错误提示
- 避免每个接口都写重复的错误处理
- 对不同 HTTP 状态码做友好提示
- 业务层代码更简洁