请求封装

基于 Axios 封装的请求模块，支持请求拦截、响应拦截、错误处理等功能。

安装

npm i axios

封装示例

src/utils/request.ts

import axios from 'axios'
import type { AxiosError, InternalAxiosRequestConfig } from 'axios'

export interface HttpResponse<T = unknown> {
  status: number
  msg: string
  code: number
  data: T
}

export const request = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL || undefined, // 请求 url，根据实际情况配置
  // timeout: 3000, // 请求超时时间
})

// 请求拦截器
request.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    const token = 'TOKEN_VALUE' // 替换为实际 token
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  (error) => Promise.reject(error),
)

// 响应拦截器
request.interceptors.response.use(
  (response) => {
    const res = response.data as HttpResponse
    if (res?.code !== 20000) {
      Message.error({
        content: res?.msg || 'Error',
        duration: 5 * 1000,
      })

      if ([50008, 50012, 50014].includes(res?.code) && response.config.url !== '/api/user/info') {
        Modal.error({
          title: 'Confirm logout',
          content: 'You have been logged out, you can cancel to stay on this page, or log in again',
          okText: 'Re-Login',
          async onOk() {
            const { useUserStore } = await import('@/store')
            const userStore = useUserStore()
            await userStore.logout()
            window.location.reload()
          },
        })
      }

      return Promise.reject(new Error(res?.msg || 'Error'))
    }
    return res as any
  },
  (error: AxiosError<any>) => {
    const backendMsg = error.response?.data?.msg
    Message.error({
      content: backendMsg || error.message || 'Request Error',
      duration: 5 * 1000,
    })
    return Promise.reject(error)
  },
)

src/api/posts.ts

import { request, type HttpResponse } from '@/utils/request'

// 列表
export const fetchPosts = (params?: Record<string, any>) =>
  request.get<HttpResponse<{ items: any[]; total: number }>>('/api/posts', { params })

// 增
export const createPost = (data: Record<string, any>) => request.post<HttpResponse>('/api/posts', data)

// 改
export const updatePost = (id: number, data: Record<string, any>) => request.put<HttpResponse>(`/api/posts/${id}`, data)

// 删
export const deletePost = (id: number) => request.delete<HttpResponse>(`/api/posts/${id}`)