utils/loading.js
/*** 全局loading效果：合并多次loading请求，避免重复请求* 当调用一次showLoading，则次数+1；当次数为0时，则显示loading* 当调用一次hideLoading，则次数-1; 当次数为0时，则结束loading*/
import { ElLoading } from 'element-plus';// 定义一个请求次数的变量，用来记录当前页面总共请求的次数
let loadingRequestCount = 0;
// 初始化loading
let loadingInstance;// 编写一个显示loading的函数 并且记录请求次数 ++
const showLoading = (target) => {if (loadingRequestCount === 0) {// element的服务方式 target 我这边取的是表格class// 类似整个表格loading和在表格配置v-loading一样的效果，这么做是全局实现了，不用每个页面单独去v-loadingloadingInstance = ElLoading.service({ target });}loadingRequestCount++
}// 编写一个隐藏loading的函数，并且记录请求次数 --
const hideLoading = () => {if (loadingRequestCount <= 0) returnloadingRequestCount--if (loadingRequestCount === 0) {loadingInstance.close();}}export {showLoading,hideLoading}
axios/axios.js
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getToken } from '@/utils/auth'
import { showLoading, hideLoading } from '@/utils/loading'// 配置环境
const isProd = process.env.NODE_ENV === 'production'
const options = {baseURL: isProd ? '/xxx' : '/xxx'
}
const instance = axios.create(options)// 添加请求拦截器
instance.interceptors.request.use(config => {// 请求拦截进来调用显示loading效果showLoading()// 断网提示if (!navigator.onLine) {ElMessageBox.alert('您的网络故障，请检查!','温馨提示',{confirmButtonText: '好的',type: 'warning'})}// 判断是否存在token，如果存在将每个页面header都添加tokenif (getToken()) {config.headers.Authorization = getToken()}return config
}, error => {console.log('请求拦截error', error)// 对请求错误做些什么return Promise.reject(error)
})// http response 拦截器
instance.interceptors.response.use(response => {// 响应拦截进来隐藏loading效果，此处采用延时处理是合并loading请求效果，避免多次请求loading关闭又开启setTimeout(() => {hideLoading()}, 200)// ...对状态码进行拦截判断if (errcode === 0) {return response.data} else if (errcode === xxx) {ElMessageBox.alert('你已被登出，需要重新登录','温馨提示',{confirmButtonText: '重新登录',type: 'warning',showClose: false}).then(() => {removeCookie()// 为了重新实例化vue-router对象 避免buglocation.reload()})} else {ElMessage.error(errmsg)return Promise.reject(response.data)}
}, error => {// 响应拦截进来隐藏loading效果，此处采用延时处理是合并loading请求效果，避免多次请求loading关闭又开启setTimeout(() => {hideLoading()}, 200)console.log('http response - err', error)ElMessage({message: '服务器异常，请稍后再试',type: 'error',duration: 5 * 1000})return Promise.reject(new Error('error'))
})export default instance