Vue项目整体添加加载中Loading页面

因为Vue通过axios请求后端数据 , 请求过程始终是异步的 , 开始想着用一个变量标识 , 进而让他显示加载中或者隐藏掉加载中的界面

后来发现页面中多模块都发起了不同的请求,这样的话 , 全部是异步的 , 该什么时候隐藏加载中模块就不得而知了

因此基于上面的问题 , 我在拦截器中进行了处理
让其在request请求拦截器中进行展示加载中页面
让其在response响应拦截器中进行隐藏加载中页面

代码如下

这是我的发起请求的封装的工具类

import axios from 'axios'
import {Loading, Message, MessageBox} from 'element-ui'

// 创建axios实例
const service = axios.create({
     baseURL: "http://test.ad.spergol.com:8080/", // api 的 base_url
  //baseURL: "http://localhost:8080/", // api 的 base_url

  timeout: 300000 // 请求超时时间
});

// 第三步 http request 拦截器
service.interceptors.request.use(
  config => {
    showLoaing()
    return config
  },
  err => {
    return Promise.reject(err);
  })

// response 拦截器
service.interceptors.response.use(
  response => {
    /**
     * code为非20000是抛错 可结合自己业务进行修改
     */
    const res = response.data;
    // debugger
    if (res.code !== 20000) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject('error')
    } else {
      hideLoading()
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)


let loading;
let loadingCount = 0;
function start() {
  loading = Loading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0,0,0,0.7)'
  })
};
function end() {
  loading.close();
}
function showLoaing() {
  if (loadingCount == 0) {
    start();
  };
  loadingCount++
};

function hideLoading() {
  loadingCount--;
  if (loadingCount == 0) {
    end()
  }
}

export default service