以服务的方式调用的全屏 Loading 是单例的:若在前一个全屏 Loading 关闭前再次调用全屏 Loading,并不会创建一个新的 Loading 实例,而是返回现有全屏 Loading 的实例,所以我们全局封装的时候采用计数的方式确定是否关闭loading.
还需要注意的是Loading.service target里面可以配置局部现实加载动画,适应于实际项目中不需要全屏显示加载动画
import axios from "axios";
import { Message } from 'element-ui';
import { Loading } from "element-ui";
import ipConfig from "./ip-config";
let requestCount = 0
let loadingInstance = null
function logout() {
localStorage.setItem("token2", undefined);
localStorage.setItem("loginTime2", Date.now());
localStorage.setItem("userName2", "");
window.location.href = "/";
}
const service = axios.create({
baseURl: ipConfig.baseIp,
timeout: 30 * 1000,//设置6分钟
});
//请求拦截器
service.interceptors.request.use(config => {
//发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加
if (requestCount == 0) {
loadingInstance = Loading.service({
lock: true,
target: document.querySelector('.base-popup-content'),
text: "",
background: "rgba(0,0,0,0.8)",
});
}
// 每次请求计数+1
requestCount += 1;
config.headers = {
'Content-Type': 'application/json;blob' //配置请求头
}
const token = localStorage.getItem('token2')
if (token) {
config.headers['Authorization'] = 'Bearer ' + token
}
return config
}, error => {
requestCount -= 1;
// 当加载实例存在且计数小于等于0的时候把加载效果关闭
if (requestCount <= 0 && loadingInstance) {
requestCount = 0;
loadingInstance.close();
}
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(response => {
// 当请求返回的时候计数-1
requestCount -= 1;
// 当加载实例存在且计数小于等于0的时候把加载效果关闭
if (requestCount <= 0 && loadingInstance) {
requestCount = 0;
loadingInstance.close();
}
const code = response.data.code || 200;
if (code === 401) {
Message.error('无效的会话,或者会话已过期,请重新登录。')
logout()
} else if (code !== 200) {
} else {
return response.data.data ? response.data.data : response.data
}
}, error => {
/***** 接收到异常响应的处理开始 *****/
// 当响应出现异常的时候计数-1
requestCount -= 1;
// 当加载实例存在且计数小于等于0的时候把加载效果关闭
if (requestCount <= 0 && loadingInstance) {
requestCount = 0;
loadingInstance.close();
}
if (error && error.response) {
// 1.公共错误处理
// 2.根据响应码具体处理
switch (error.response.status) {
case 400:
error.message = '错误请求'
break;
case 401:
error.message = '未授权,请重新登录'
logout()
break;
case 403:
error.message = '拒绝访问'
break;
case 404:
error.message = '请求错误,未找到该资源'
// window.location.href = "/NotFound"
break;
case 405:
error.message = '请求方法未允许'
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:
error.message = `连接错误${error.response.status}`
}
} else {
// 超时处理
if (JSON.stringify(error).includes('timeout')) {
Message.error('服务器响应超时')
}
error.message = '服务器响应超时'
}
/***** 处理结束 *****/
//如果不需要错误处理,以上的处理过程都可省略
return Promise.resolve(error.response)
})
export default service
更详细的方法可以参照如何在 Axios 中去控制 Loading_小储今天暴富了的博客-CSDN博客