Axios 请求

VTS 简单封装了基于 Axios 的 HTTP 请求模块，提供了统一的接口调用方式和响应处理机制。

基础配置

项目使用 axios 创建了一个独立的实例，文件在 request.ts 基础配置如下：

const service: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_BASE_API,
  timeout: 15000
})

• baseURL: 从环境变量中获取 API 基础路径
• timeout: 请求超时时间为 15 秒

请求拦截器

请求拦截器主要处理以下内容：

1. Token 处理：

   • 自动为请求添加 Authorization token（登录接口除外）
   • token 从 Cookie 中获取

2. 数据格式转换：

   • 自动将请求数据从驼峰命名转换为下划线命名
   • FormData 类型的数据不进行转换

service.interceptors.request.use(request => {
  const token = Cookie.get('token')
  
  // 转换命名规则（排除 FormData）
  if (!(request.data instanceof FormData)) {
    request.data = decamelizeKeys(request.data)
  }
  request.params = decamelizeKeys(request.params)

  // 添加 token（排除登录接口）
  if (request.url !== '/login') {
    request.headers.Authorization = token
  }

  return request
})

响应拦截器

响应拦截器处理以下场景：

1. 统一的响应数据结构：

interface RespData<T> {
  success?: boolean
  errorCode?: number
  error?: number | string | null
  msg?: string
  data?: T
  [key: string]: any
}

2. 特殊响应处理：

   • 处理二进制数据（Blob）响应
   • 处理文件下载
   • 自动将响应数据从下划线命名转换为驼峰命名

3. 错误处理：

   • HTTP 状态码错误处理
   • 网络请求失败处理
   • 支持错误重定向配置

错误码说明

系统定义了统一的错误码消息映射：

状态码	说明
200	请求成功
201	创建或修改数据成功
400	请求错误
401	未授权（token/用户名/密码错误）
403	禁止访问
404	资源不存在
500	服务器错误
502	网关错误
503	服务不可用
504	网关超时

工具函数

文件下载

提供了文件下载相关的工具函数：

// 下载文件
export function downloadFile(boldData: any, filename = 'test-filename', type: string) {
  const blob = boldData instanceof Blob
    ? boldData
    : new Blob([boldData], { type })
  // ... 下载逻辑
}

// 处理文件名
function extractFileNameFromContentDispositionHeader(value: string) {
  // ... 文件名提取逻辑
}

使用示例

// 普通请求
const response = await service.get('/api/users')

// 文件下载请求
const fileResponse = await service.get('/api/download', {
  responseType: 'blob'
})

// 带重定向的请求
const response = await service.get('/api/data', {
  redirect: 'error-page'
})