vuex+axios+element-ui实现页面请求loading操作示例

import Vue from "vue";
import Vuex from "vuex";
import { Loading } from "element-ui";
Vue.use(Vuex);
const state = {
 //请求计数
 apiCount: 0,
 //loading实例
 loadingInstance: null,
};
const mutations = {
 /* 打开Loading */
 startLoading(state, msg) {
  state.loadingInstance = Loading.service({
   lock: true,
   text: msg ? msg : "加载中...",
   background: "rgba(0, 0, 0, 0.7)"
  });
 },
 /* 关闭loading */
 closeLoading(state) {
  state.loadingInstance.close();
 },
 /* 更新请求线程池 */
 updateApiCount(state, handle) {
  if (handle == "add") {
   state.apiCount++;
   this.commit("startLoading");
  } else {
   state.apiCount--;
   if (state.apiCount <= 0) {
    this.commit("closeLoading");
   }
  }
 }
};
const store = new Vuex.Store({
 state,
 mutations
});
export default store;

import axios from "axios";
import { Message } from "element-ui";
import store from "../store/index";
import router from "../router/index";
const service = axios.create({
 baseURL: process.env.VUE_APP_BASE_URL,
 timeout: 0
});
service.interceptors.request.use(
 config => {
  store.commit("updateApiCount", "add");
  return config;
 },
 error => {
  store.commit("updateApiCount", "sub");
  Promise.reject(error);
 }
);
service.interceptors.response.use(
 response => {
  store.commit("updateApiCount", "sub");
  return response.data;
 },
 error => {
  store.commit("updateApiCount", "sub");
  return Promise.reject(error);
 }
);
export default service;