189 8069 5689
小编给大家分享一下vuex+axios+element-ui如何实现页面请求loading操作示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联公司专注于卓资企业网站建设,响应式网站设计,电子商务商城网站建设。卓资网站建设公司,为卓资等地区提供建站服务。全流程按需制作网站，专业设计，全程项目跟踪，创新互联公司专业和态度为您提供的服务
我们在平常写项目的时候，发请求的时候肯定会习惯用一个 loading 遮罩层来防止用户在没拿到数据之前误操作
如果是页面同时只发送一个请求，那么无论是在组件中或者是在 axios 插件中进行请求和响应拦截都可以做到
但是，当一个页面同时要发送多个请求的时候，这么做显然就不行了
因为最先完成的请求会把所有请求的 loading 都给关闭
举个例子，第一个请求的响应时间为 3s ，第二个请求的响应时间为 1s ，两个同时请求的时候，loading 会开始
但是当 1s 后第二个请求完成后，会直接关闭 loading，但是此时第一个请求还没完成，所有这样肯定是不行的
今天就用这篇文章来介绍下我在项目中是怎么应对这种情况的
element-ui 的 loading
vuex 的状态管理
axios 的请求拦截和响应拦截
其实这个思路很简单，就是通过 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 了，无论同时多少个请求都可以
以上是“vuex+axios+element-ui如何实现页面请求loading操作示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！