vue2实现数据请求显示loading图
发布时间：2020-12-17 02:41:58 所属栏目：百科 来源：网络整理
导读：一般项目中，有时候会要求，你在数据请求的时候显示一张gif图片，然后数据加载完后，消失。这个，一般只需要在封装的axios中写入js事件即可。当然，我们首先需要在app.vue中，加入此图片。如下： 这里的fetchLoading是存在vuex里面的一个变量。在store/modul
|
一般项目中，有时候会要求，你在数据请求的时候显示一张gif图片，然后数据加载完后，消失。这个，一般只需要在封装的axios中写入js事件即可。当然，我们首先需要在app.vue中，加入此图片。如下： 这里的fetchLoading是存在vuex里面的一个变量。在store/modules/common.js里需要如下定义： state.fetchLoading
}
const actions = {
// 请求数据时状态loading
FETCH_LOADING({
commit
},res) {
commit(types.FETCH_LOADING,res)
},}
const mutations = {
// 请求数据时loading
[types.FETCH_LOADING] (state,res) {
state.fetchLoading = res
}
}
loading组件如下： 最后在fetch/api.js里封装的axios里写入判断loading事件即可：如下 {
axios.post(url,params)
.then(response => {
// 关闭 loading图片消失
let oDate = new Date()
let time = 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 = new Date()
reject(error)
})
})
}
export default {
// 组件中公共页面请求函数
commonApi (url,params) {
if(stringQuery(window.location.href)) {
store.dispatch('FETCH_LOADING',true);
}
axiosDate = new Date();
return fetch(url,params);
}
}
这样就实现了，项目中当加载数据的时候，显示gif图片，当数据加载出来时消失。 关于vue.js的学习教程，请大家点击专题、进行学习。 更多vue学习教程请阅读专题 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |