网络请求
XYGo Admin 2025-02-20 127 次阅读
Axios 封装、三套请求实例与拦截器机制
网络请求
架构设计
项目基于 Axios 封装了统一的 HTTP 请求层,位于 web/src/utils/http/:
utils/http/
├── index.ts # 核心封装:Axios 实例、拦截器、请求方法
├── status.ts # 业务状态码定义
└── error.ts # 自定义 HttpError 类
三套请求实例
通过 createPrefixedApi(prefix) 工厂函数创建带前缀的请求实例:
typescript
// 后台管理接口 — 自动注入 Bearer Token
export const adminRequest = createPrefixedApi('/admin')
// 前台会员接口 — 自动注入 Xy-User-Token
export const memberRequest = createPrefixedApi('/member')
// 前台公共接口 — 无需 Token
export const siteRequest = createPrefixedApi('/site')
每个实例提供 5 个方法:
typescript
adminRequest.get<T>({ url, params?, config? })
adminRequest.post<T>({ url, params?, config? })
adminRequest.put<T>({ url, params?, config? })
adminRequest.del<T>({ url, params?, config? })
adminRequest.request<T>(config)
使用示例
typescript
// API 文件 — api/backend/cms/doc.ts
import { adminRequest } from '@/utils/http'
export function fetchDocList(params: any) {
return adminRequest.get({ url: '/cmsDoc/list', params })
}
export function fetchSaveDoc(data: any) {
return adminRequest.post({ url: '/cmsDoc/edit', params: data })
}
export function fetchDeleteDoc(id: number) {
return adminRequest.post({ url: '/cmsDoc/delete', params: { id } })
}
拦截器
请求拦截器
- 根据 URL 前缀自动区分 Token 类型
/admin开头 → 注入Authorization: Bearer <token>/member开头 → 注入Xy-User-Token: <token>- 其他 → 不注入 Token
响应拦截器
| 业务码 | 处理方式 |
|---|---|
| 0 (success) | 返回 response.data.data |
| -1 (error) | ElMessage 提示错误信息 |
| 61 (unauthorized) | 清除 Token,跳转登录页(3 秒防抖) |
| 10010 (kickedOut) | 弹窗提示被踢下线 |
配置
- baseURL:来自环境变量
VITE_API_URL - 超时时间:15 秒
- 失败重试:可配置(默认关闭)