vue3+ts+vite axios的封装,axios 声明合并扩展AxiosRequestConfig额外参数 第五回

?

1 2	// 安装axios npm install axios  和第三方js-cookie、qs 。懂的都懂。

　　由于很多业务复杂，后端被拆分成多个微服务，所以axios必须来一层简单的封装。下面贴出整个request.ts 脚本
在types目录下，新建axios.d.ts ,内容如下

?

1 2 3 4 5 6 7 8 9 10 11 12

import { AxiosRequestConfig } from 'axios'   declare module 'axios' {   export interface AxiosRequestConfig {     /** 服务名 */     serv?: string     /** api版本 */     apiVersion?: string     /** 是否需要loading */     needLoading?: boolean   } }

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155

import { ElLoading } from 'element-plus' import axios from 'axios' import qs from 'qs' import Cookies from 'js-cookie'   // 定义一个常见后端请求返回 type BaseApiResponse = {   code: number   message: string   data: any   status: boolean }   const request = axios.create({   baseURL: 'http://xxx',   timeout: 300000, // 请求超时时间   paramsSerializer: params => {     return qs.stringify(params, { indices: false })   } }) <br>// 这里需要注意，按需引入的时候，需要在main.ts引入样式  import 'vue-simple-uploader/dist/style.css'const defaultElLoadingOptions = {   lock: true,   text: '请稍后',   body: true,   background: 'rgba(0, 0, 0, 0.1)' }   let loadingInstance: any = null   /**  * interceptor request<br> * AxiosRequestConfig额外扩展的serv（微服务名）,apiVersion  */ request.interceptors.request.use((config) => {   if (config.serv) {     config.baseURL += `${config.serv}/${config.apiVersion}`   }   const token = Cookies.get('login_ticket')   config.headers['Authorization'] = decodeURIComponent(token);       if (config.method === 'get' || config.method === 'GET') {     config.params = config.data   }   if (config.needLoading) {     loadingInstance = ElLoading.service(defaultElLoadingOptions)     setTimeout(() => {       loadingInstance.close()     }, 30000)   }   return config },   error => {     Promise.reject(error)     loadingInstance.close()   } ) // 不需要登录的白名单 const needLogin = (hash: string) => {   let path = /login|register\/public/   const witePaths = [     '#/',<br>    '#/public'     '#/login'   ];   return (     witePaths.indexOf(hash.split('?')[0]) === -1     && hash.search(path) === -1   ); }   // interceptor response request.interceptors.response.use(   async response => {     if (response.headers && response.headers.authorization) {       Cookies.set('token', response.headers.authorization)     }     const dataAxios = response.data     if (loadingInstance) {       loadingInstance.close()     }     if (dataAxios && dataAxios.httpCode - 0 === 401 && needLogin(location.hash)) {       localStorage.setItem('source', encodeURIComponent(location.href))       location.href = `/#/login`       return     }     // 这个状态码是和后端约定的     // const { status } = response       let status = null     if (dataAxios.status && !isNaN(dataAxios.status - 0)) {       status = dataAxios.status     }     if (dataAxios.code && !isNaN(dataAxios.code - 0)) {       status = dataAxios.code     }     // 根据 code 进行判断     if (status !== null) {       // 有 code 代表这是一个后端接口 可以进行进一步的判断       switch (status) {         case 0:           return dataAxios.result || dataAxios.result == 0 ? dataAxios.result : dataAxios         case 200:           return dataAxios.result || dataAxios.result == 0 ? dataAxios.result : dataAxios         case 401:           if (needLogin(location.hash)) {             // 处理token置换，或者登陆跳转，           }           return           case 'xxx':           // [ 示例 ] 其它和后台约定的 code           break         default:           // 不是正确的 code           //  errorCreate(`${dataAxios.message}`)           break       }     } else {       // 如果没有 code 代表这不是项目后端开发的接口 比如可能是 D2Admin 请求最新版本       return dataAxios     }   },   error => {     if (loadingInstance) {       loadingInstance.close()     }       if (error && error.response) {       if (error.response.data && error.response.data.message && error.response.data.message == '无访问权限') {         location.href = '/home'         return       }       switch (error.response.status) {         case 400: error.message = `请求错误: ${error.response.data && error.response.data.message}`; break         case 401: error.message = '未授权，请登录';           Cookies.set('login_ticket', '');           Cookies.set('refresh_token', '');           location.href = `/#/login?source=${encodeURIComponent(location.href)}`; break         case 403: error.message = '拒绝访问'; break         case 404: error.message = `请求地址出错: ${error.response.config.url}`; break         case 408: error.message = '请求超时'; break         case 500: error.message = '服务器内部错误'; break         case 501: error.message = '服务未实现'; break         case 502: error.message = '网关错误'; break         case 503: error.message = '服务不可用'; break         case 504: error.message = '网关超时'; break         case 505: error.message = 'HTTP版本不受支持'; break         default: break       }     }     // errorLog(error)     return Promise.reject(error)   } )     export default request

　　至此，axios的封装告一段落。调用的部分如下。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

import request from '@/utils/request'   // // 验证码 export function getVerificationCode() {   return request({     method: 'get',     url: '/verification/code',     serv: '/auth',     apiVersion: 'v1',     needLoading: true   }   ) }