站长资源网络编程
vue2实现数据请求显示loading图
简介一般项目中，有时候会要求，你在数据请求的时候显示一张gif图片，然后数据加载完后，消失。这个，一般只需要在封装的axios中写入js事件即可。当然，我们首先需要在app.vue中，加入此图片。如下：
一般项目中，有时候会要求，你在数据请求的时候显示一张gif图片，然后数据加载完后，消失。这个，一般只需要在封装的axios中写入js事件即可。当然，我们首先需要在app.vue中，加入此图片。如下：
<template>
<div id="app">
<loading v-show="fetchLoading"></loading>
<router-view></router-view>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import Loading from './components/common/loading';
export default {
name: 'app',
data() {
return {
}
},
computed: {
...mapGetters([
'fetchLoading',
]),
},
components: {
Loading,
}
}
</script>
<style>
#app{
width: 100%;
height: 100%;
}
</style>
这里的fetchLoading是存在vuex里面的一个变量。在store/modules/common.js里需要如下定义：
/* 此js文件用于存储公用的vuex状态 */
import api from './../../fetch/api'
import * as types from './../types.js'
const state = {
// 请求数据时加载状态loading
fetchLoading: false
}
const getters = {
// 请求数据时加载状态
fetchLoading: state => 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组件如下：
<template> <div class="loading"> <img src="/UploadFiles/2021-04-02/running.gif">最后在fetch/api.js里封装的axios里写入判断loading事件即可：如下
// axios的请求时间 let axiosDate = new Date() export function fetch (url, params) { return new Promise((resolve, reject) => { 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.js组件学习教程、Vue.js前端组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：元素全屏的设置与监听实例
下一篇：Vue2仿淘宝实现省市区三级联动