基于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)目實(shí)現(xiàn)局部全屏完整代碼
最近需要做一個(gè)全屏功能,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)局部全屏的相關(guān)資料,需要的朋友可以參考下2023-09-09Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格加載樹(shù)形數(shù)據(jù)教程
這篇文章主要為大家詳細(xì)介紹了Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格加載樹(shù)形數(shù)據(jù)教程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06vue實(shí)現(xiàn)頁(yè)面加載動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面加載動(dòng)畫(huà)效果,vue頁(yè)面出現(xiàn)正在加載的初始頁(yè)面與實(shí)現(xiàn)動(dòng)畫(huà)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09Vue?element?ui用戶(hù)展示頁(yè)面的實(shí)例
這篇文章主要介紹了Vue?element?ui用戶(hù)展示頁(yè)面的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vuejs2 + Webpack框架里,模擬下載的實(shí)例講解
今天小編就為大家分享一篇Vuejs2 + Webpack框架里,模擬下載的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue中使用jquery滑動(dòng)到頁(yè)面底部的實(shí)現(xiàn)方式
這篇文章主要介紹了vue中使用jquery滑動(dòng)到頁(yè)面底部的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12