微客导航 » 文章资讯 » vue2实现数据请求显示loading图

vue2实现数据请求显示loading图

2023-09-20 09:26:07 312

一般项目中，有时候会要求，你在数据请求的时候显示一张gif图片，然后数据加载完后，消失。这个，一般只需要在封装的axios中写入js事件即可。当然，我们首先需要在app.vue中，加入此图片。如下：

这里的fetchLoading是存在vuex里面的一个变量。在store/modules/common.js里需要如下定义：

/*此js文件用于存储公用的vuex状态*/
importapifrom'./../../fetch/api'
import*astypesfrom'./../types.js'
conststate={
//请求数据时加载状态loading
fetchLoading:false
}
constgetters={
//请求数据时加载状态
fetchLoading:state=>state.fetchLoading
}
constactions={
//请求数据时状态loading
FETCH_LOADING({
commit
},res){
commit(types.FETCH_LOADING,res)
},
}
constmutations={
//请求数据时loading
[types.FETCH_LOADING](state,res){
state.fetchLoading=res
}
}

loading组件如下：






.loading{
position:fixed;
top:0;
left:0;
z-index:121;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
display:table-cell;
vertical-align:middle;
text-align:center;
}
.loadingimg{
margin:5remauto;
}

最后在fetch/api.js里封装的axios里写入判断loading事件即可：如下

//axios的请求时间
letaxiosDate=newDate()
exportfunctionfetch(url,params){
returnnewPromise((resolve,reject)=>{
axios.post(url,params)
.then(response=>{
//关闭loading图片消失
letoDate=newDate()
lettime=oDate.getTime()-axiosDate.getTime()
if(time<500)time=500
setTimeout(()=>{
store.dispatch('FETCH_LOADING',false)
},time)
resolve(response.data)
})
.catch((error)=>{
//关闭loading图片消失
store.dispatch('FETCH_LOADING',false)
axiosDate=newDate()
reject(error)
})
})
}
exportdefault{
//组件中公共页面请求函数
commonApi(url,params){
if(stringQuery(window.location.href)){
store.dispatch('FETCH_LOADING',true);
}
axiosDate=newDate();
returnfetch(url,params);
}
}

这样就实现了，项目中当加载数据的时候，显示gif图片，当数据加载出来时消失。

关于vue.js的学习教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue2实现数据请求显示loading图

热门推荐

随机推荐