本文实例讲述了vuex+axios+element-ui实现页面请求loading操作。分享给大家供大家参考，具体如下：
我们在平常写项目的时候，发请求的时候肯定会习惯用一个 loading 遮罩层来防止用户在没拿到数据之前误操作
如果是页面同时只发送一个请求，那么无论是在组件中或者是在 axios 插件中进行请求和响应拦截都可以做到
但是，当一个页面同时要发送多个请求的时候，这么做显然就不行了
因为最先完成的请求会把所有请求的 loading 都给关闭
举个例子，第一个请求的响应时间为 3s ，第二个请求的响应时间为 1s ，两个同时请求的时候，loading 会开始
但是当 1s 后第二个请求完成后，会直接关闭 loading，但是此时第一个请求还没完成，所有这样肯定是不行的
今天就用这篇文章来介绍下我在项目中是怎么应对这种情况的
其实这个思路很简单，就是通过 vuex 来管理请求的个数，假如用 apiCount 这个变量来代表请求的个数，每次请求的时候打开 loading 并且 apiCount 加一，每次响应完成或者失败的时候都让 apiCount 减一，并且检测 apiCount 变量的值，当为 apiCount=0 的时候，就关闭 loading 就可以了，代码如下：
store.js 代码（用来管理 vuex）
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;
request.js 代码（封装 axios 的文件）
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;
好了，这样就做到了请求的时候自动打开 loading，所有的请求结束才会关闭 loading 了，无论同时多少个请求都可以
希望本文所述对大家vue.js程序设计有所帮助。
