La carga de pantalla completa llamada como servicio es un singleton: si se vuelve a llamar a la carga de pantalla completa antes de que se cierre la carga de pantalla completa anterior, no se creará una nueva instancia de carga, pero se creará una instancia de la carga de pantalla completa existente. se devolverá, por lo que lo encapsulamos globalmente. El método de conteo se utiliza para determinar si se debe cerrar la carga.
También debe tenerse en cuenta que la animación de carga local de la vida real se puede configurar en el destino Loading.service, que es adecuado para proyectos reales que no requieren la visualización en pantalla completa de la animación de carga.
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 Para obtener métodos más detallados, consulte Cómo controlar la carga en el blog de Axios_Xiao Chu de Getting Rich Today-CSDN Blog