vue3使用axios加入ts支持

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'

/**
 * Ajax请求拦截器配置
 */
export interface HttpInterceptor<T = AxiosResponse> {
  requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig
  requestInterceptorCatch?: (error: any) => any
  responseInterceptor?: (res: T) => T
  responseInterceptorCatch?: (error: any) => any
}

export interface AjaxRequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
  interceptors?: HttpInterceptor<T>
}

export class AjaxRequest {
  instance: AxiosInstance

  constructor(config?: AjaxRequestConfig) {
    this.instance = axios.create(config)
    this.instance.interceptors.request.use(
      config?.interceptors?.requestInterceptor,
      config?.interceptors?.requestInterceptorCatch
    )
    this.instance.interceptors.response.use(
      config?.interceptors?.responseInterceptor,
      config?.interceptors?.responseInterceptorCatch
    )
  }

  // Promise<AxiosResponse<T>>
  request<ReqDataType, RespDataType>(config: AjaxRequestConfig<AxiosResponse<RespDataType>>): Promise<AxiosResponse<RespDataType>> {
    return new Promise((resolve, reject) => {
      if (config.interceptors?.requestInterceptor) {
        config = config.interceptors.requestInterceptor(config)
      }
      this.instance
        .request<RespDataType, AxiosResponse<RespDataType>, ReqDataType>(config)
        .then((res) => {
          if (config.interceptors?.responseInterceptor) {
            res = config.interceptors.responseInterceptor(res)
          }
          resolve(res) // 将结果返回出去
        })
        .catch((err) => {
          reject(err)
          return err
        })
    })
  }

  get<ReqDataType, RespDataType>(config: AjaxRequestConfig<AxiosResponse<RespDataType>>): Promise<AxiosResponse<RespDataType>> {
    return this.request<ReqDataType, RespDataType>({
      ...config,
      method: 'GET'
    })
  }

  post<ReqDataType, RespDataType>(config: AjaxRequestConfig<AxiosResponse<RespDataType>>): Promise<AxiosResponse<RespDataType>> {
    return this.request<ReqDataType, RespDataType>({
      ...config,
      method: 'POST'
    })
  }

  del<ReqDataType, RespDataType>(config: AjaxRequestConfig<AxiosResponse<RespDataType>>): Promise<AxiosResponse<RespDataType>> {
    return this.request<ReqDataType, RespDataType>({
      ...config,
      method: 'DELETE'
    })
  }

  put<ReqDataType, RespDataType>(config: AjaxRequestConfig<AxiosResponse<RespDataType>>): Promise<AxiosResponse<RespDataType>> {
    return this.request<ReqDataType, RespDataType>({
      ...config,
      method: 'PUT'
    })
  }
}

import { AjaxRequest, AjaxRequestConfig } from 'utils/Ajax'
import { AxiosResponse } from 'axios'

const config: AjaxRequestConfig = {}
if (import.meta.env.VITE_AJAX_BASE_URL) {
  config.baseURL = import.meta.env.VITE_AJAX_BASE_URL
}
if (import.meta.env.VITE_AJAX_TIMEOUT) {
  config.timeout = import.meta.env.VITE_AJAX_TIMEOUT
}
config.interceptors = {
  requestInterceptor: (config) => {
    console.log('请求成功的拦截')
    return config
  },
  requestInterceptorCatch: (err) => {
    console.log('请求失败的拦截')
    return err
  },
  responseInterceptor: (res) => {
    console.log('响应成功的拦截')
    return res
  },
  responseInterceptorCatch: (err) => {
    console.log('响应失败的拦截')
    return err
  }
}
export const httpAjaxReq = new AjaxRequest(config)

export async function sysRequestPost<ReqDataType, RespDataType>(url: string, data: ReqDataType): Promise<RespDataType> {
  const config: AjaxRequestConfig<AxiosResponse<RespDataType>> = {
    url,
    data
  }
  const resp: AxiosResponse<RespDataType> = await httpAjaxReq.post<ReqDataType, RespDataType>(config)
  return resp.data
}

export async function sysRequestGet<ReqDataType, RespDataType>(url: string, data: ReqDataType): Promise<RespDataType> {
  const config: AjaxRequestConfig<AxiosResponse<RespDataType>> = {
    url,
    data
  }
  const resp: AxiosResponse<RespDataType> = await httpAjaxReq.get<ReqDataType, RespDataType>(config)
  return resp.data
}

export async function sysRequestPut<ReqDataType, RespDataType>(url: string, data: ReqDataType): Promise<RespDataType> {
  const config: AjaxRequestConfig<AxiosResponse<RespDataType>> = {
    url,
    data
  }
  const resp: AxiosResponse<RespDataType> = await httpAjaxReq.put<ReqDataType, RespDataType>(config)
  return resp.data
}

export async function sysRequestDel<ReqDataType, RespDataType>(url: string, data: ReqDataType): Promise<RespDataType> {
  const config: AjaxRequestConfig<AxiosResponse<RespDataType>> = {
    url,
    data
  }
  const resp: AxiosResponse<RespDataType> = await httpAjaxReq.del<ReqDataType, RespDataType>(config)
  return resp.data
}