vue2实现数据请求显示loading图
一般项目中,有时候会要求,你在数据请求的时候显示一张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组件如下:
最后在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实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。