This is a encapsulated axios util class

HttpClient.ts

import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios'
import {RequestParams} from '@/interfaces/request-params'

/**
 * Axios 基础实例
 * @type {AxiosInstance}
 */
const axiosInstance: AxiosInstance = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 10_000,
  timeoutErrorMessage: '请求超时，请检查网络连接情况'
})

const TOKEN_KEY = 'Authorization'
const LOCAL_TOKEN_KEY = 'Authorization'

// 为 axios 实例配置响应拦截器
axiosInstance.interceptors.response.use((response: AxiosResponse) => {
  // 拦截 TOKEN 并保存到本地
  if (response.headers) {
    const token = response.headers[TOKEN_KEY]
    if (token && token !== '') {
      localStorage.setItem(LOCAL_TOKEN_KEY, token)
    }
  }

  return response.data
}, (error: unknown) => {
  return Promise.reject(error)
})

// 为 axios 实例配置请求拦截器
axiosInstance.interceptors.request.use((request: AxiosRequestConfig) => {
  if (request.headers) {
    request.headers['Content-Type'] = 'application/json; charset=UTF-8'

    // 尝试获取token数据
    const token = localStorage.getItem(LOCAL_TOKEN_KEY)
    if (token && token != '') {
      request.headers[TOKEN_KEY] = token
    }
  }
  return request
}, (error: unknown) => {
  return Promise.reject(error)
})

/**
 * HttpClient 工具类
 */
export class HttpClient {
  private static readonly instance: AxiosInstance = axiosInstance

  /**
   * 处理请求 URI
   * @param {string} uri 原始 URI
   * @param {RequestParams} params 请求参数
   * @returns {string} 被处理好的 URI
   * @private 该方法只可以内部使用
   */
  private static handleUri(uri: string, params?: RequestParams): string {
    if (params) {
      // 先处理路径参数
      if (params.pathVariable) {
        for (const item of params.pathVariable) {
          uri += `/${item}`
        }
      }

      // 再处理搜索参数
      if (params.queryParam) {
        const searchParams = new URLSearchParams()
        for (const queryParamKey in params.queryParam) {
          searchParams.append(queryParamKey, `${params.queryParam[queryParamKey]}`)
        }
      }
    }

    return uri
  }

  /**
   * 以 Get 方式请求指定路径
   * @param {string} url 请求路径
   * @param {RequestParams} params 请求参数
   * @returns {Promise<AxiosResponse>} Axios 响应对象
   */
  public static get(url: string, params?: RequestParams): Promise<AxiosResponse> {
    url = this.handleUri(url, params)

    return this.instance.get(url)
  }

  /**
   * 以 Post 方式请求指定路径
   * @param {string} url 请求路径
   * @param {RequestParams} params 请求参数
   * @returns {Promise<AxiosResponse>} Axios 响应对象
   */
  public static post(url: string, params?: RequestParams): Promise<AxiosResponse> {
    url = this.handleUri(url, params)

    if (params?.requestBody) {
      return this.instance.post(url, params.requestBody)
    } else {
      return this.instance.post(url)
    }
  }

  /**
   * 以 Put 方式请求指定路径
   * @param {string} url 请求路径
   * @param {RequestParams} params 请求参数
   * @returns {Promise<AxiosResponse>} Axios 响应对象
   */
  public static put(url: string, params?: RequestParams): Promise<AxiosResponse> {
    url = this.handleUri(url, params)

    if (params?.requestBody) {
      return this.instance.put(url, params.requestBody)
    } else {
      return this.instance.put(url)
    }
  }

  /**
   * 以 Delete 方式请求指定路径
   * @param {string} url 请求路径
   * @param {RequestParams} params 请求参数
   * @returns {Promise<AxiosResponse>} Axios 响应对象
   */
  public static delete(url: string, params?: RequestParams): Promise<AxiosResponse> {
    url = this.handleUri(url, params)

    return this.instance.delete(url)
  }
}

RequestParams.ts

/**
 * 请求参数
 */
export interface RequestParams {
  /**
   * 搜索参数，一般指的是跟在uri的<code>?</code>后面，并且以 <code> <key> = <value> </code> 的形式存在
   */
  queryParam?: Record<string, string | number>

  /**
   * 路径参数，一般是直接填写在路径中的变量
   */
  pathVariable?: string[]

  /**
   * 请求 body
   */
  requestBody?: Record<string, string | number>

}