网络请求

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 秒
  • 失败重试:可配置(默认关闭)