一個(gè)應(yīng)用不管是App還是PC端打開(kāi)頁(yè)面的時(shí)候都會(huì)有l(wèi)oading迈嘹，那么loading一般情況下是在頁(yè)面調(diào)取接口數(shù)據(jù)的時(shí)候加載顯示表锻，數(shù)據(jù)加載完之后隱藏loading蛀醉，那么在加載數(shù)據(jù)就會(huì)有存在幾種情況：
一饲齐、頁(yè)面同時(shí)只有一個(gè)接口請(qǐng)求數(shù)據(jù)
這種情況下是大多時(shí)候出現(xiàn)的爽待，請(qǐng)求開(kāi)始時(shí)顯示loading愈捅，結(jié)束時(shí)取消loading遏考，這個(gè)目前看起來(lái)沒(méi)有問(wèn)題
二、頁(yè)面同時(shí)有幾個(gè)互不相關(guān)的接口請(qǐng)求數(shù)據(jù)
當(dāng)并列同時(shí)請(qǐng)求2個(gè)以上的數(shù)據(jù)接口時(shí)蓝谨，有可能某個(gè)接口提前請(qǐng)求結(jié)束了灌具，這時(shí)候取消loading會(huì)導(dǎo)致還未結(jié)束的其他請(qǐng)求也失去了loading，導(dǎo)致頁(yè)面還沒(méi)有數(shù)據(jù)
三譬巫、當(dāng)網(wǎng)絡(luò)異常等引起中斷時(shí)
當(dāng)頁(yè)面正在請(qǐng)求接口時(shí)突然網(wǎng)絡(luò)異常中斷了咖楣，導(dǎo)致請(qǐng)求一直無(wú)法結(jié)束loading一直顯示無(wú)法操作，只能關(guān)閉應(yīng)用再重新打開(kāi)
四芦昔、其他情況等
針對(duì)上述有可能重新的情況诱贿，那么我們很有必要封裝一下這個(gè)loading的事件，使其在任何時(shí)候都能使用：
1烟零、給這個(gè)loading公用的事件上一個(gè)計(jì)數(shù)的鎖瘪松，每次請(qǐng)求開(kāi)始執(zhí)行l(wèi)oading的時(shí)候這個(gè)計(jì)數(shù)值就+1，請(qǐng)求結(jié)束的時(shí)候loading計(jì)數(shù)值就-1锨阿，那么當(dāng)這個(gè)計(jì)數(shù)值為0的時(shí)候就可以取消loading的顯示了
2宵睦、設(shè)置一個(gè)默認(rèn)顯示時(shí)間，當(dāng)網(wǎng)絡(luò)中斷等導(dǎo)致請(qǐng)求無(wú)法繼續(xù)時(shí)墅诡，等待一定時(shí)間后自動(dòng)取消loading
移動(dòng)端-超過(guò)默認(rèn)顯示時(shí)間關(guān)閉loading：
import Vue from 'vue'
import { Toast } from 'vant';
Vue.use(Toast);
let loading;
let loadingCount = 0; //loading發(fā)起時(shí)加的計(jì)數(shù)鎖
let numberCount = 0; //定時(shí)器增加的數(shù)值
let timer = null; //定時(shí)器
const loadingTime = 15; //超時(shí)時(shí)間值(秒)
const defaultState = {
text: "正在加載……",
time: ""
}
const startLoading = (state) => {
loading = Toast.loading({
duration: 0, // 持續(xù)展示 toast
forbidClick: true, // 禁用背景點(diǎn)擊
mask: true, //是否顯示背景遮罩層
loadingType: 'spinner',
message: state.text
});
Toast.allowMultiple() //允許同時(shí)存在多個(gè) Toast
if(state.time){
setTimeout(() => {
endLoading();
loadingCount = 0
}, state.time)
}
// 超時(shí)關(guān)閉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端不設(shè)置默認(rèn)顯示時(shí)間壳嚎，而是左上角顯示關(guān)閉按鈕：
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的關(guān)閉按鈕
hideCloseBtn()
};
export const showLoading = (state = defaultState) => {
if (loadingCount === 0) {
startLoading(state);
// 顯示loading關(guān)閉按鈕
showCloseBtn()
}
loadingCount += 1;
};
export const hideLoading = () => {
if (loadingCount <= 0) {
return;
}
loadingCount -= 1;
if (loadingCount === 0) {
endLoading();
}
};
// loading頁(yè)面展示時(shí)右上角關(guān)閉按鈕
// 返回一個(gè) 擴(kuò)展實(shí)例構(gòu)造器, vue.extend官方文檔 https://cn.vuejs.org/v2/api/#Vue-extend
import ImageIcon from 'common/images/loadingClose.png'
var LoadingClose = Vue.extend({
template: '<img class="loading-close" v-if="showClose" @click="closeLoading" :src="loadingIcon"/>'
})
// 實(shí)例化一個(gè) closeDom.vue
const closeDom = new LoadingClose({
el: document.createElement('div'),
data() {
return {
loadingIcon: ImageIcon,
showClose: false
}
},
methods: {
// 點(diǎn)擊關(guān)閉按鈕 關(guān)閉loading和按鈕的顯示
closeLoading() {
loadingCount = 0
endLoading();
}
}
})
// 把 實(shí)例化的 closeDom.vue 添加到 body 里
document.body.appendChild(closeDom.$el)
function showCloseBtn() {
closeDom.showClose = true
}
function hideCloseBtn() {
closeDom.showClose = false
}
