问题详细描述
项目设置全局loading动画加载,如果页面一次加载了多个请求 ,当其中有一个接口请求成功后 loading加载动画会消失,但是其实 此时还有一个接口还未 请求成功 那么其实加载动画不应该消失的。
解决方法
多个请求 如果有一个请求成功 则加载动画 就会结束 问题(等所有请求都完成才能结束)- 计数 记录需要加载动画的请求(isLoading不是false的)的接口数量 当关闭时 查看请求(isLoading不是false的)的数量是否完全都走过 确定则关闭
请求接口展示
export function getData() {
return request({
url: 'order/getData',
method: 'post',
headers:{
isLoading:false//不用使用加载动画loading
}
})
};
// 客户白名单
export function getWhiteList(params) {
return request({
url: '/whiteList/list',
method: 'post',
data:params
})
};
export function removeWhiteList(params) {
return request({
url: '/whiteList/remove',
method: 'post',
data:params
})
};
http.js代码
//插件模块
import axios from 'axios'
import router from '@/router'
import { Loading,Message} from 'element-ui';//引入Loading服务
//开始加载动画
var loading;
var loadingNum=0 //初始化接口数量
export function startLoading() {
loading = Loading.service({
lock:true, //是否锁定
text:'Loading...',//加载中需要显示的文字
// background:'rgba(0,0,0,.7)',//背景颜色
});
}
//结束加载动画
export function endLoading() {
loading.close();
}
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 60000, // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
if(config.url=='/login'){
}else{
if (sessionStorage.getItem('token')) { // 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.common['token']=sessionStorage.getItem('token');
}
}
// 查看发送请求的接口有没有设置isLoading
if(config.headers.isLoading !== false){
loadingNum++ //记录需要加载动画的接口数量
startLoading();//请求时的加载动画
}
return config
},error => {
return Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(
response => {
if(response.config.headers.isLoading==false){
// isLoading 为false时 不做任何处理 防止 有接口成功了 将还未请求成功的接口 的加载动画 给结束掉
}else{
loadingNum--
if(loadingNum==0){
endLoading();//结束加载动画
}
}
return response.data
},error => {
if(error.response){
// token失效
if(error.response.status==401){
Message({
message: 'token失效,请重新登录',
type: "error"
});
router.push({name:'login'})
}else if(error.response.status==404){
Message({
message: '服务错误',
type: "error"
});
}
}else if(error.request){
// 请求超时后 操作
if(error.request.readyState == 4 && error.request.status == 0){
Message({
message: '超过60000毫秒超时',
type: "error"
});
}
}
loadingNum=0//遇到一个报错 则所有的动画都结束
endLoading();//结束加载动画
return Promise.reject(error)
}
)
export default service