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-loading
loadingInstance = ElLoading.service({ target });
}
loadingRequestCount++
}
// 编写一个隐藏loading的函数,并且记录请求次数 --
const hideLoading = () => {
if (loadingRequestCount <= 0) return
loadingRequestCount--
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都添加token
if (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对象 避免bug
location.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