🚀 Axios企业级封装实战:从拦截器到安全策略
🔧 核心代码解析
typescript
// 创建Axios实例
const service = axios.create({
baseURL: api, // 🌐 全局API前缀
timeout: 0, // ⏳ 永不超时(慎用!)
withCredentials: false // 🚫 禁用Cookie跨域
})
// 🛡️ 请求拦截器
service.interceptors.request.use(config => {
if (UserModule.token) {
const { token } = JSON.parse(UserModule.token) // ⚠️ 风险点:缺少try-catch
config.headers['token'] = token // 🔑 自动注入Token
}
return config
})
// 📡 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data
switch(res.code) {
case 0: return res.data // ✅ 正常流程
case 1: showWarning(res.msg) // 🟠 Token失效
case 7: forceLogout() // 🔒 强制登出
default: throwError(res.msg) // 🚨 未知错误
}
},
error => { ... } // 🌩️ 网络错误处理
)
🎯 核心功能图解
Yes No 200 0 1 7 其他 Request 携带Token? 注入Header 直接发送 后端API 响应状态码 业务状态码 返回数据 显示警告 强制登出 错误处理
💡 最佳实践亮点
1. 🛡️ 安全防护策略

2. 🚦 拦截器工作流
前端 Axios实例 后端 发起请求 请求拦截器 注入Token/添加埋点 处理后的请求 原始响应 响应拦截器 状态码解析/错误格式化 标准化响应 前端 Axios实例 后端
⚠️ 风险提示与改进
1. 危险代码段
typescript
const { token } = JSON.parse(UserModule.token) // 💥 未捕获JSON解析错误
2. 安全增强方案
问题 原始方案 Token暴露风险 改进方案 内存存储加密 HttpOnly Cookie 短期Token+自动续期
🧠 思维导图:企业级Axios架构

🌟 性能优化Tips
markdown
1. 🚴♂️ 请求合并:将多个API合并为批量接口
2. 🧹 请求清理:页面切换时取消pending请求
3. 🗃️ 数据缓存:LRU策略缓存高频请求
4. 📦 Payload压缩:启用gzip压缩
5. 🔍 智能预加载:根据用户行为预测请求
"好的封装能让Axios发挥200%的威力!" ------ 某匿名架构师