vite3.2+TS封装axios请求类

下载axios

npm i -S axios

修改package.json

"scripts": {
    "dev": "vite --mode development",
    "build": "vue-tsc && vite build --mode production",
  },

配置

config / index.ts

interface Config {
  timeout: number,
  isMock: boolean,
  baseApi: string,
  mockApi: string,
  env: 'production' | 'development'
}

const config: Config = {
  timeout: 15000,
  isMock: false,
  baseApi: import.meta.env.MODE === 'production' ? 'http://xxx.xxx.com' : '/api/v1',
  mockApi: 'http://mock/api',
  env: import.meta.env.MODE === 'production' ? 'production' : 'development'
}

封装请求类

utils / axiosUtil.ts

import axios, { AxiosInstance, AxiosRequestConfig, AxiosPromise } from 'axios'
import { showDialog } from 'vant'
import config from '@/config'

type Methods = 'get' | 'post' | 'patch' | 'delete' | 'put'

type ReqFn = (url: string, data?: any, isMock?: boolean) => AxiosPromise<any>

interface Request {
  get: ReqFn
  post: ReqFn
  put: ReqFn
  delete: ReqFn
  patch: ReqFn
}

interface AxiosRequestConfig_ extends AxiosRequestConfig {
  isMock: boolean
}

class AxiosUtil {
  static axiosUtil: AxiosUtil = new AxiosUtil()

  private axiosInstance!: AxiosInstance

  private reqMethods!: Methods[]

  request!: Request

  constructor() {
    this.reqMethods = ['delete', 'get', 'patch', 'post', 'put']
    this.request = {
      'get': (): any => { },
      'delete': (): any => { },
      'patch': (): any => { },
      'post': (): any => { },
      'put': (): any => { },
    }
    this.createInstance()
    this.reqInterceptors()
    this.resInterceptors()
    this.bindReqEvent()
  }


  // 创建实例
  private async createInstance() {
    this.axiosInstance = axios.create({ timeout: config.timeout })
  }

  // 请求拦截
  private async reqInterceptors() {
    this.axiosInstance.interceptors.request.use(config => {
      return config
    })
  }

  // 响应拦截
  private async resInterceptors() {
    this.axiosInstance.interceptors.response.use(response => {
      const { data, code, msg } = response.data
      if (code === 200) return data
      if (code === 500) {
        showDialog({ message: `${msg}` });
        return Promise.reject(new Error(msg))
      }
    }, error => {
      showDialog({ message: `网络错误!` });
      return Promise.reject(error)
    })
  }

  // 发送请求
  private async sendRequest(requestConfig: AxiosRequestConfig_) {
    // 判断 Mock
    if (config.env === 'production') {
      this.axiosInstance.defaults.baseURL = config.baseApi
    } else if (config.env === 'development') {
      const Mock: boolean = requestConfig['isMock'] || config.isMock
      this.axiosInstance.defaults.baseURL = Mock ? config.mockApi : config.baseApi
    }

    // 返回请求信息
    return this.axiosInstance(requestConfig)
  }

  // 绑定请求事件
  private async bindReqEvent() {
    this.reqMethods.forEach(method => {
      this.request[method] = (url = '', data = {}, isMock = false) => this.sendRequest({
        url,
        data,
        method,
        isMock
      })
    })
  }
}

export default AxiosUtil.axiosUtil.request