HTTP 请求模块

基于 Axios 封装的 HTTP 请求模块，提供请求缓存、取消重复请求、Token 管理等功能。

核心特性

• 请求缓存 - 支持内存缓存和 localStorage 持久化
• 取消重复请求 - 自动取消相同的并发请求
• Token 管理 - 自动携带认证信息
• 错误处理 - 统一的错误码处理和提示
• 文件导出 - 支持文件下载和导出

引入方式

import { http, getToken, setToken, clearToken, downloadFileByUrl } from '@erp/biz'

基础用法

GET 请求

// 基础 GET 请求
const users = await http.get('/api/users')

// 带参数的 GET 请求
const user = await http.get('/api/users', { id: 1 })

// 带配置的 GET 请求
const data = await http.get('/api/users', { page: 1 }, { 
  noMsg: true  // 不显示错误消息
})

POST 请求

// 基础 POST 请求
const result = await http.post('/api/users', { 
  name: '张三',
  age: 25 
})

// 表单格式提交
const result = await http.post('/api/login', { 
  username: 'admin',
  password: '123456'
}, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

通用请求

const result = await http.request({
  method: 'PUT',
  url: '/api/users/1',
  data: { name: '李四' }
})

请求配置

RequestConfig

参数	说明	类型	默认值
cancelKey	取消重复请求的标识，设为 true 时使用 URL 作为 key	string | boolean	-
cache	是否缓存请求结果（内存缓存）	boolean	false
local	是否将缓存存储到 localStorage	boolean	false
noMsg	是否禁止显示错误消息	boolean	false
interceptors	自定义拦截器	RequestInterceptors	-

取消重复请求

当同一个请求在短时间内多次发起时，可以取消前面的请求：

// 使用 URL 作为 cancelKey
http.get('/api/search', { keyword: 'test' }, { cancelKey: true })

// 自定义 cancelKey
http.get('/api/search', { keyword: 'test' }, { cancelKey: 'search-request' })

请求缓存

// 内存缓存（刷新页面后失效）
const config = await http.get('/api/config', {}, { cache: true })

// localStorage 缓存（持久化）
const dict = await http.get('/api/dict', { code: 'status' }, { 
  cache: true, 
  local: true 
})

静默请求

// 请求失败时不显示错误提示
const result = await http.get('/api/check', {}, { noMsg: true })

文件导出

// 导出文件（自动下载）
await http.exportFile('/api/export/users', { 
  startDate: '2024-01-01',
  endDate: '2024-12-31'
})

Token 管理

getToken

获取当前存储的 Token。

const token = getToken()
// 返回: 'eyJhbGciOiJIUzI1NiIs...'

setToken

设置 Token。

setToken('your-jwt-token')

clearToken

清除 Token。

clearToken()

getAuthorizationToken

获取带 Bearer 前缀的 Token。

import { getAuthorizationToken } from '@erp/biz'

const authToken = getAuthorizationToken()
// 返回: 'Bearer eyJhbGciOiJIUzI1NiIs...'

文件下载

downloadFileByUrl

根据 URL 下载文件。

import { downloadFileByUrl } from '@erp/biz'

// 下载文件
downloadFileByUrl('https://example.com/file.pdf')

// 指定文件名
downloadFileByUrl('https://example.com/file.pdf', '报表.pdf')

自定义实例

import { Request } from '@erp/biz'

const customHttp = new Request({
  baseURL: 'https://api.example.com',
  timeout: 30000,
  withCredentials: true,
  interceptors: {
    // 请求拦截
    requestInterceptor: (config) => {
      config.headers['X-Custom-Header'] = 'value'
      return config
    },
    // 请求错误拦截
    requestInterceptorCatch: (error) => {
      return Promise.reject(error)
    },
    // 响应拦截
    responseInterceptor: (response) => {
      // 自定义响应处理
      return response
    },
    // 响应错误拦截
    responseInterceptorCatch: (error) => {
      return Promise.reject(error)
    }
  }
})

// 使用自定义实例
const data = await customHttp.get('/api/data')

错误处理

HTTP 模块会自动处理以下错误码：

错误码	说明	处理方式
200	成功	返回 body 或 data
401	未授权	调用 exitLogin，跳转登录
402	登录过期	调用 exitLogin，跳转登录
500	服务器错误	显示警告消息
601	业务错误	显示警告消息

自定义退出登录

http.exitLogin = () => {
  // 清除用户信息
  clearToken()
  // 跳转登录页
  window.location.href = '/login'
}

类型定义

import type { 
  RequestConfig, 
  RequestInterceptors, 
  Response, 
  ResponseData 
} from '@erp/biz'

// 请求配置
interface RequestConfig extends InternalAxiosRequestConfig {
  cancelKey?: string | boolean
  cache?: boolean
  local?: boolean
  noMsg?: boolean
  interceptors?: RequestInterceptors
}

// 响应数据
interface ResponseData<T = any> {
  code: number
  body?: T
  data?: T
  msg: string
}

示例

完整的 CRUD 示例

import { http } from '@erp/biz'

// 用户服务
const userService = {
  // 获取用户列表
  async getList(params: { page: number; size: number }) {
    return http.get<{ list: User[]; total: number }>('/api/users', params)
  },
  
  // 获取用户详情
  async getById(id: number) {
    return http.get<User>(`/api/users/${id}`)
  },
  
  // 创建用户
  async create(data: CreateUserDto) {
    return http.post<User>('/api/users', data)
  },
  
  // 更新用户
  async update(id: number, data: UpdateUserDto) {
    return http.request<User>({
      method: 'PUT',
      url: `/api/users/${id}`,
      data
    })
  },
  
  // 删除用户
  async delete(id: number) {
    return http.request({
      method: 'DELETE',
      url: `/api/users/${id}`
    })
  },
  
  // 导出用户列表
  async export(params: ExportParams) {
    return http.exportFile('/api/users/export', params)
  }
}