/** 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 } 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() //如果返回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