vuex+axios+element-ui实现页面请求loading操作示例
本文实例讲述了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）
importVuefrom"vue";
importVuexfrom"vuex";
import{Loading}from"element-ui";
Vue.use(Vuex);
conststate={
//请求计数
apiCount:0,
//loading实例
loadingInstance:null,
};
constmutations={
/*打开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");
}
}
}
};
conststore=newVuex.Store({
state,
mutations
});
exportdefaultstore;
request.js代码（封装 axios的文件）
importaxiosfrom"axios";
import{Message}from"element-ui";
importstorefrom"../store/index";
importrouterfrom"../router/index";
constservice=axios.create({
baseURL:process.env.VUE_APP_BASE_URL,
timeout:0
});
service.interceptors.request.use(
config=>{
store.commit("updateApiCount","add");
returnconfig;
},
error=>{
store.commit("updateApiCount","sub");
Promise.reject(error);
}
);
service.interceptors.response.use(
response=>{
store.commit("updateApiCount","sub");
returnresponse.data;
},
error=>{
store.commit("updateApiCount","sub");
returnPromise.reject(error);
}
);
exportdefaultservice;
好了，这样就做到了请求的时候自动打开loading，所有的请求结束才会关闭loading了，无论同时多少个请求都可以
希望本文所述对大家vue.js程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。