基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果
前言
在vue項(xiàng)目中,我們通常會(huì)使用Axios來(lái)與后臺(tái)進(jìn)行數(shù)據(jù)交互。而當(dāng)我們發(fā)起請(qǐng)求時(shí),常常需要在頁(yè)面上顯示一個(gè)加載框(Loading),然后等數(shù)據(jù)返回后自動(dòng)將其隱藏。要實(shí)現(xiàn)這個(gè)功能,我們可以在每次請(qǐng)求前手動(dòng)顯示個(gè)加載框,等收到數(shù)據(jù)后又將其隱藏。但如果每個(gè)請(qǐng)求要都這么做,就有點(diǎn)麻煩。,但眾所周知,程序猿是一種不喜歡麻煩的生物,那么我們要怎么樣讓這個(gè)步驟變得不再那么繁瑣呢。
下面通過(guò)一個(gè)demo演示如何封裝一個(gè)帶loading效果的Axios組件,它能夠?qū)φ?qǐng)求和響應(yīng)進(jìn)行攔截從而實(shí)現(xiàn) loading的自動(dòng)顯示與隱藏,并且在請(qǐng)求失敗時(shí)自動(dòng)彈出消息提示框顯示錯(cuò)誤信息。
demo
原理說(shuō)明
- 通過(guò) axios 提供的請(qǐng)求攔截和響應(yīng)攔截的接口,控制 loading 的顯示或者隱藏。同時(shí)在請(qǐng)求失敗時(shí)還會(huì)自動(dòng)彈出消息提示框顯示錯(cuò)誤信息。
loading效果采用Element UI中提供的Loading組件來(lái)實(shí)現(xiàn)。而錯(cuò)誤消息提示框則用的是Element UI中的Message組件來(lái)實(shí)現(xiàn)。- 內(nèi)部有個(gè)計(jì)數(shù)器,確保同一時(shí)刻如果有多個(gè)請(qǐng)求的話,不會(huì)同時(shí)出現(xiàn)多個(gè) loading,而是只有 1 個(gè)。并且在所有請(qǐng)求結(jié)束后才會(huì)隱藏 loading。
- 使用了
debounce防抖。因?yàn)橛袝r(shí)會(huì)碰到在一次請(qǐng)求完畢后又立刻又發(fā)起一個(gè)新的請(qǐng)求的情況。這種情況會(huì)造成連續(xù)loading兩次,并且中間有一次的閃爍。通過(guò)防抖避免閃爍的情況。 - 默認(rèn)所有請(qǐng)求都會(huì)自動(dòng)有
loading效果。如果某個(gè)請(qǐng)求不需要loading效果,可以在請(qǐng)求頭中showLoading設(shè)置為false - 默認(rèn)的
loading效果是覆蓋在body上。如果某個(gè)請(qǐng)求是需要在某個(gè)指定元素上顯示loading效果,可以將請(qǐng)求header中loadingTarget設(shè)置為該元素的選擇符。
代碼實(shí)現(xiàn)
http.js
import axios from 'axios';
import { Message,Loading } from 'element-ui';
import _ from 'lodash';
const http = axios.create({
baseURL:process.env.BASE_URL, //設(shè)置請(qǐng)求的base url
timeout:40000 //超時(shí)時(shí)長(zhǎng)
});
//loading
let loading;
//當(dāng)前正在請(qǐng)求的數(shù)量
let LoadingRequestCount = 0;
//顯示loading
function showLoading(target) {
if (LoadingRequestCount === 0 && !loading) {
loading = Loading.service({
lock: true,
text: "加載中",
background: 'rgba(255, 255, 255)',
target: target || "body"
});
}
LoadingRequestCount++;
}
//隱藏loading
function hideLoading() {
LoadingRequestCount--;
LoadingRequestCount = Math.max(LoadingRequestCount, 0); //防止小于0的情況發(fā)生
if (LoadingRequestCount === 0) {
//關(guān)閉loading
toHideLoading();
}
}
//防抖
var toHideLoading = _.debounce(()=>{
loading.close();
loading = null;
}, 100);
//添加請(qǐng)求攔截器
http.interceptors.request.use(config => {
//判斷當(dāng)前請(qǐng)求是否設(shè)置了不顯示Loading
if(config.headers.showLoading !== false){
showLoading(config.headers.loadingTarget);
}
return config;
}, err => {
//判斷當(dāng)前請(qǐng)求是否設(shè)置了不顯示Loading
if(config.headers.showLoading !== false){
hideLoading();
}
Message.error('請(qǐng)求失敗!');
//拋出錯(cuò)誤
return Promise.resolve(err);
});
//響應(yīng)攔截器
http.interceptors.response.use(
response => {
//判斷當(dāng)前請(qǐng)求是否設(shè)置了不顯示Loading(不顯示自然無(wú)需隱藏)
if(response.config.headers.showLoading !== false){
hideLoading();
}
return response;
},
error => {
//判斷當(dāng)前請(qǐng)求是否設(shè)置了不顯示Loading(不顯示自然無(wú)需隱藏)
if(error.config.headers.showLoading !== false){
hideLoading();
}
if(error.response && error.response.data && error.response.data.message) {
var jsonObj = JSON.parse(error.response.data.message);
Message.error(jsonObj.message);
}else{
Message.error(error.message);
}
return Promise.reject(error);
}
);
export default http;
結(jié)語(yǔ)
到此這篇關(guān)于基于Vue + Axios實(shí)現(xiàn)全局Loading自動(dòng)顯示關(guān)閉效果的文章就介紹到這了,更多相關(guān)Vue+Axios Loading自動(dòng)顯示關(guān)閉內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue項(xiàng)目部署后首頁(yè)白屏問(wèn)題排查與解決方法
在部署 Vue.js 項(xiàng)目時(shí),有時(shí)會(huì)遇到首頁(yè)加載后出現(xiàn)白屏的情況,這可能是由于多種原因造成的,本文將介紹一些常見(jiàn)的排查方法和解決方案,幫助開發(fā)者快速定位問(wèn)題并解決,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-08-08
vue路由切換之淡入淡出的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇vue路由切換之淡入淡出的簡(jiǎn)單實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue中使用AJAX實(shí)現(xiàn)讀取來(lái)自XML文件的信息
這篇文章主要為大家詳細(xì)介紹了vue中如何使用AJAX實(shí)現(xiàn)讀取來(lái)自XML文件的信息,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的小伙伴可以參考下2023-12-12
使用vNode實(shí)現(xiàn)給列表字段打標(biāo)簽
這篇文章主要為大家介紹了使用vNode實(shí)現(xiàn)給列表字段打標(biāo)簽示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
vue中通過(guò)iframe方式加載本地的vue頁(yè)面的解決方法
這篇文章主要給大家介紹了在vue中如何通過(guò)iframe方式加載本地的vue頁(yè)面的解決方法,文中有詳細(xì)的解決流程,需要的朋友可以參考下2023-06-06
tomcat部署前端vue項(xiàng)目步驟(項(xiàng)目上線具體操作)
在實(shí)際開發(fā)中,我們經(jīng)常會(huì)遇到將Vue項(xiàng)目部署到Tomcat服務(wù)器上的需求,下面這篇文章主要給大家介紹了關(guān)于tomcat部署前端vue項(xiàng)目(項(xiàng)目上線具體操作)的相關(guān)資料,需要的朋友可以參考下2024-07-07

