axios+ts封装 - 技术栈

http.ts

javascript 复制代码
import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import qs from 'qs'

/**
 * 扩展AxiosRequestConfig，增加一些自定义的属性
 * isAuth: 自定义的参数中，用来判断是否携带token  因为AxiosRequestConfig本身定义的有 auth 所以这里使用 isAuth;
 */
interface AxiosRequestConfigExt extends AxiosRequestConfig {
  isAuth?: boolean //是否携带token
  showLoading?: boolean //是否显示加载框
  error401toLogin?: boolean //是否将401错误重定向到登录页面
  dataType?: string //数据类型
  queryData: any //查询参数
}

let timerId: number = 0

class Http {
  axios: AxiosInstance = null
  constructor() {
    this.axios = axios.create({
      baseURL: 'http://localhost:5173',
      timeout: 10000,
    })

    //请求拦截器
    this.axios.interceptors.request.use(
      (config: AxiosRequestConfig): AxiosRequestConfig => {
        return config
      },
      (error: any) => {
        console.log(error)
        return Promise.reject(error)
      },
    )

    //响应拦截器
    this.axios.interceptors.response.use(
      (response: AxiosResponse) => {
        return response.data
      },
      (error: any) => {
        console.log(error)
        let message = '网络错误'
        if (error.response.status === 401) {
          message = '未登录或登录已过期，请重新登录'
          // 这里可以重定向到登录页面
          window.location.href = '/login'
        }

        if (error.response.status === 403) {
          message = '权限不足，请联系管理员'
        }

        if (error.response.status === 404) {
          message = '请求地址不存在'
        }

        if (error.response.status === 500) {
          message = '服务器内部错误'
        }

        console.log(message)
        //弹出提示框
        //showToast(message)
        return Promise.reject(error)
      },
    )
  }

  request<T>(config: AxiosRequestConfigExt): Promise<T> {
    let {
      url,
      queryData = {},
      isAuth = false,
      showLoading = false,
      method = 'GET',
      dataType = 'json',
    } = config

    if (showLoading) {
      //显示加载框 //如果请求的响应时间小于200毫秒 则不显示加载框
      //因为 timerid 是一个全局变量，所以每次请求都会覆盖之前的定时器
      //如果请求都比较快的话，只有最后一次请求才会显示加载框
      clearTimeout(timerId)
      timerId = setTimeout(() => {
        console.log('这里添加显示加载框的代码')
      }, 200)
    }

    if (isAuth) {
      let token = localStorage.getItem('token')
      if (!token) {
        //这里可以返回错误，也可以重定向到登录页面
        return Promise.reject('未登录')
      }
      config.headers['token'] = token
    }

    if (method?.toUpperCase() === 'GET') {
      return this.axios.get(url, { params: queryData })
    }

    if (method?.toUpperCase() === 'POST') {
      if (dataType === 'json') {
        return this.axios.post(url, queryData, { headers: { 'Content-Type': 'application/json' } })
      } else if (dataType === 'formData') {
        let formData = new FormData()
        Object.keys(queryData).forEach((key) => {
          formData.append(key, queryData[key])
        })
        return this.axios.post(url, formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        })
      } else if (dataType === 'qs') {
        return this.axios.post(url, qs.stringify(queryData), {
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        })
      }
    }

    return Promise.reject('请求方式不正确')
    //后面如果有其他的请求方式，可以继续扩展
  }
}

export default new Http()