在vue3+vite+ts项目中axios的封装

直接上代码

import { useUserStore } from '@/store'
import { ElMessage } from 'element-plus'
import type { Method, AxiosRequestConfig } from 'axios'
import axios from 'axios'

const server = axios.create({
  baseURL: '要替换的url',
  timeout: 5000
})
server.interceptors.request.use(
  (config) => {
    const store = useUserStore()
    let token = store.token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (err) => Promise.reject(err)
)

server.interceptors.response.use(
  (res) => {
    return res.data
  },
  (err) => {
    const store = useUserStore()
    if (err.response.data.code === '403' || err.response?.data?.msg === 'Token已过期') {
      // ElMessage.error(err.response?.data?.msg)
      store.logout()
    } else {
      ElMessage.error(err.response?.data?.msg)
    }
    return Promise.reject(err)
  }
)

type Data<T> = {
  code: string
  data: T
  message: string
  config?: AxiosRequestConfig
}

// 第一个T代表着我请求的返回的指定类型，第二个代表着 就是后端接口常见的返回格式 第三个携带的参数
 //第四个就是特殊的请求格式，比如你要上传图片视频 需要的格式是 'Content-Type': 'multipart/form-data'

const request = <T>(url: string, method: Method = 'get', submitData?: object, config?: object) => {
  const defaultConfig: AxiosRequestConfig = {
    url,
    method,
    // 区分get和其他请求post
    // get 提交数据，选项：params
    // 其他请求post 提交数据，选项：data
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
    // ...（其他默认配置，如果有的话）
  }
  const finalConfig = Object.assign({}, defaultConfig, config)

  return server.request<T, Data<T>>(finalConfig)
}

export { server, request }

在你封装的api请求中这样使用：

import { request } from '@/utils/request'
import type { GoodsResult, GoodsItem, GoodsDetailsResult, GoodsSelectTypeItem, AddGoodsParams } from '@/types/goods'

// 获取分类的全部商品
export const getGoodsTotal = (params: { categoryId: string }) => {
return request<GoodsItem[]>('/fly-code/productInfo/list', 'get', params)
}

// 购买商品
export const buyGoods = (data: { productId: number; quantity: number }) => {
return request('/fly-code/order/add', 'post', data)
}

// 上传商品图片
export const uploadGoodsImg = (data: FormData) => {
return request<string>('/fly-code/user/upload', 'post', data, { 'Content-Type': 'multipart/form-data' })
}