一般項目中，有時候會要求，你在數(shù)據(jù)請求的時候顯示一張gif圖片，然后數(shù)據(jù)加載完后，消失。這個，一般只需要在封裝的axios中寫入js事件即可。當然，我們首先需要在app.vue中，加入此圖片。如下：
創(chuàng)新互聯(lián)專注于貢山網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供貢山營銷型網(wǎng)站建設，貢山網(wǎng)站制作、貢山網(wǎng)頁設計、貢山網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務，打造貢山網(wǎng)絡公司原創(chuàng)品牌,更為您提供貢山網(wǎng)站排名全網(wǎng)營銷落地服務。
這里的fetchLoading是存在vuex里面的一個變量。在store/modules/common.js里需要如下定義：
重慶分公司
重慶分公司
/* 此js文件用于存儲公用的vuex狀態(tài) */
import api from './../../fetch/api'
import * as types from './../types.js'
const state = {
// 請求數(shù)據(jù)時加載狀態(tài)loading
fetchLoading: false
}
const getters = {
// 請求數(shù)據(jù)時加載狀態(tài)
fetchLoading: state => state.fetchLoading
}
const actions = {
// 請求數(shù)據(jù)時狀態(tài)loading
FETCH_LOADING({
commit
}, res) {
commit(types.FETCH_LOADING, res)
},
}
const mutations = {
// 請求數(shù)據(jù)時loading
[types.FETCH_LOADING] (state, res) {
state.fetchLoading = res
}
}loading組件如下：
最后在fetch/api.js里封裝的axios里寫入判斷l(xiāng)oading事件即可：如下
// 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 {
// 組件中公共頁面請求函數(shù)
commonApi (url, params) {
if(stringQuery(window.location.href)) {
store.dispatch('FETCH_LOADING', true);
}
axiosDate = new Date();
return fetch(url, params);
}
}這樣就實現(xiàn)了，項目中當加載數(shù)據(jù)的時候，顯示gif圖片，當數(shù)據(jù)加載出來時消失。
關于vue.js的學習教程，請大家點擊專題vue.js組件學習教程、Vue.js前端組件學習教程進行學習。
更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
