页面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: '<img class="loading-close" v-if="showClose" @click="closeLoading" :src="loadingIcon"/>'
})
// 实例化一个 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
}