页面loading解决方案
一个应用不管是App还是PC端打开页面的时候都会有loading，那么loading一般情况下是在页面调取接口数据的时候加载显示，数据加载完之后隐藏loading，那么在加载数据就会有存在几种情况：
一、页面同时只有一个接口请求数据
这种情况下是大多时候出现的，请求开始时显示loading，结束时取消loading，这个目前看起来没有问题
二、页面同时有几个互不相关的接口请求数据
当并列同时请求2个以上的数据接口时，有可能某个接口提前请求结束了，这时候取消loading会导致还未结束的其他请求也失去了loading，导致页面还没有数据
三、当网络异常等引起中断时
当页面正在请求接口时突然网络异常中断了，导致请求一直无法结束loading一直显示无法操作，只能关闭应用再重新打开
四、其他情况等
针对上述有可能重新的情况，那么我们很有必要封装一下这个loading的事件，使其在任何时候都能使用：
1、给这个loading公用的事件上一个计数的锁，每次请求开始执行loading的时候这个计数值就+1，请求结束的时候loading计数值就-1，那么当这个计数值为0的时候就可以取消loading的显示了
2、设置一个默认显示时间，当网络中断等导致请求无法继续时，等待一定时间后自动取消loading
移动端-超过默认显示时间关闭loading：
import Vue from 'vue'
import { Toast } from 'vant';
Vue.use(Toast);
let loading;
let loadingCount = 0; //loading发起时加的计数锁
let numberCount = 0; //定时器增加的数值
let timer = null; //定时器
const loadingTime = 15; //超时时间值(秒)
const defaultState = {
text: "正在加载……",
time: ""
}
const startLoading = (state) => {
loading = Toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
mask: true, //是否显示背景遮罩层
loadingType: 'spinner',
message: state.text
});
Toast.allowMultiple() //允许同时存在多个 Toast
if(state.time){
setTimeout(() => {
endLoading();
loadingCount = 0
}, state.time)
}
// 超时关闭loading
timer = setInterval(() => {
numberCount++;
if(numberCount > loadingTime){
endLoading();
loadingCount = 0
}
}, 1000)
};
const endLoading = () => {
loading.clear();
// 接除timer
clearInterval(timer)
numberCount = 0
};
export const showLoading = (state = defaultState) => {
if (loadingCount === 0) {
startLoading(state);
}
loadingCount += 1;
};
export const hideLoading = () => {
if (loadingCount <= 0) {
return;
}
loadingCount -= 1;
if (loadingCount === 0) {
endLoading();
}
};
PC端不设置默认显示时间，而是左上角显示关闭按钮：
import Vue from 'vue'
import { Loading } from 'element-ui';
let loadingCount = 0;
let loading;
const defaultState = {
text: "正在加载……",
time: ""
}
const startLoading = (state) => {
loading = Loading.service({
lock: true,
text: state.text,
background: 'rgba(0, 0, 0, 0.7)'
});
if(state.time){
setTimeout(() => {
endLoading();
loadingCount = 0
}, state.time)
}
};
const endLoading = () => {
loading.close();
// 隐藏loading的关闭按钮
hideCloseBtn()
};
export const showLoading = (state = defaultState) => {
if (loadingCount === 0) {
startLoading(state);
// 显示loading关闭按钮
showCloseBtn()
}
loadingCount += 1;
};
export const hideLoading = () => {
if (loadingCount <= 0) {
return;
}
loadingCount -= 1;
if (loadingCount === 0) {
endLoading();
}
};
// loading页面展示时右上角关闭按钮
// 返回一个 扩展实例构造器, vue.extend官方文档 https://cn.vuejs.org/v2/api/#Vue-extend
import ImageIcon from 'common/images/loadingClose.png'
var LoadingClose = Vue.extend({
template: ''
})
// 实例化一个 closeDom.vue
const closeDom = new LoadingClose({
el: document.createElement('div'),
data() {
return {
loadingIcon: ImageIcon,
showClose: false
}
},
methods: {
// 点击关闭按钮 关闭loading和按钮的显示
closeLoading() {
loadingCount = 0
endLoading();
}
}
})
// 把 实例化的 closeDom.vue 添加到 body 里
document.body.appendChild(closeDom.$el)
function showCloseBtn() {
closeDom.showClose = true
}
function hideCloseBtn() {
closeDom.showClose = false
}