classroom/src/libs/axios.ts

/** http请求类 */
import axios, { AxiosInstance, AxiosRequestConfig, Method, AxiosPromise } from "axios"
import Nprogress from "@/plugin/nprogress"
import { ElMessage } from "element-plus"
import { TokenInvalidFlag, CODE401 } from "@/libs/auth"
import userStore from "@/store/modules/user"

//重写 axios 传参
interface AxiosConfigType extends AxiosRequestConfig {
   method: Method //method 必须为Method 格式
}

// axiosObj 传值
type axiosObjType = {
   getTokenFun?: () => string | undefined // 获取token的函数
   tokenName?: string // headers token的名字
   nprogress?: boolean // 是否显示滚动条
}

/** api接口 */
export interface axiosApiType {
   (...param: any[]): AxiosPromise<any>
}

class HttpAsynAxios {
   constructor(url: string, axiosObj?: axiosObjType) {
      this.URL = url
      this.axiosObj = axiosObj
   }
   private URL = ""
   private axiosObj: axiosObjType | undefined = undefined
   private httpInterceptor(instance: AxiosInstance) {
      ;(this.axiosObj ? !(this.axiosObj.nprogress === false) : true) && Nprogress.start() //开启
      //http request 请求拦截器
      instance.interceptors.request.use(
         config => {
            return config
         },
         error => {
            console.log(error)
            Nprogress.done()
            const rejectData: apiResDataType = {
               code: 500,
               message: "系统运行异常，请刷新页面",
               data: null
            }
            return Promise.reject(rejectData)
         }
      )
      // http response 结果拦截器
      instance.interceptors.response.use(
         response => {
            Nprogress.done()
            // *** 转换msg为message  正常是没有的 这里2个系统所以合并一下
            response.data.msg && (response.data.message = response.data.msg)
            //如果返回401则跳转到登录页
            if (response.data.code === CODE401) {
               //如果token登录状态 才提示和退出
               if (TokenInvalidFlag) {
                  const responseData: apiResDataType = response.data
                  ElMessage.error(responseData.message)
                  //登出
                  userStore().resetUser()
               }
            }
            return response
         },
         error => {
            console.log(error)
            Nprogress.done()
            // if (error.response) {
            //     // 响应错误之后的操作
            //     switch (error.response.status) {
            //         case 401:
            //     }
            // }
            const rejectData: apiResDataType = {
               code: 500,
               message: "系统运行异常，请刷新页面",
               data: null
            }
            return Promise.reject(rejectData) // 返回接口返回的错误信息
         }
      )
   }
   //创建实例
   private createInstance() {
      const axiosObj = this.axiosObj
      return axios.create(
         axiosObj?.tokenName
            ? {
                 baseURL: this.URL,
                 headers: {
                    [axiosObj.tokenName]: axiosObj.getTokenFun && axiosObj.getTokenFun()
                 }
              }
            : {
                 baseURL: this.URL
              }
      )
   }
   /**
      axios请求方法
      ```
      {
         data: data,     //get方法的时候为params：data
         method: "post",
         url: '/auth/loginIn'，
         headers:{
                  'Content-Type':'application/json',
         },
         responseType: 'blob',
      }
      ```
   */
   axioseRquest(opt: AxiosConfigType) {
      const instance = this.createInstance()
      this.httpInterceptor(instance)
      return instance(opt)
   }
}

export default HttpAsynAxios