vue-element-admin 全局loading加載等待
最近遇到需求:
全局加載loading,所有接口都要可以手動(dòng)控制是否展示加載等待的功能
百度了一下,發(fā)現(xiàn)好多是寫(xiě)在攔截器內(nèi)的,在攔截器內(nèi)調(diào)用element ui的loading方法,在接口請(qǐng)求的時(shí)候開(kāi)始啟動(dòng)加載loading,在接口返回和接口報(bào)錯(cuò)拋異常的時(shí)候關(guān)閉loading
在這個(gè)思路上改動(dòng)了一下,因?yàn)楹臀业男枨笥幸稽c(diǎn)不同,我們的需求是可以手動(dòng)控制是否展示加載等待的功能,既然是手動(dòng)控制那么肯定不能直接在攔截器里面才開(kāi)始調(diào)用loading方法了,往前推一步,在調(diào)接口的時(shí)候就開(kāi)始控制是否啟用loading方法,我需要手動(dòng)封裝axios的調(diào)用,以前開(kāi)發(fā)的時(shí)候就封裝了axios, 代碼:
url:接口api,
data:參數(shù)
dom:html中的class或id傳參時(shí)需要加'./#',因?yàn)閘oading會(huì)用到j(luò)s的querySelector屬性方法,次屬性用于區(qū)分加載等待是整個(gè)頁(yè)面加載等待還是局部某一塊dom的加載等待---非必傳,默認(rèn)整個(gè)頁(yè)面加載等待
bool:區(qū)分是否開(kāi)啟加載等待----非必傳,默認(rèn)開(kāi)啟加載等待
圖片中我封裝了多個(gè)類型的axios,不是所有請(qǐng)求都需要加載等待,我這邊get請(qǐng)求默認(rèn)get請(qǐng)求是加載一些初始數(shù)據(jù)的,這些數(shù)據(jù)是不需要給客戶看到的;
我只在post內(nèi)加了這么多參數(shù)用于區(qū)分是否需要加載等待及全局和局部加載等待,另外axiosDownload請(qǐng)求是文件流類型,屬于比較特殊請(qǐng)求,區(qū)分出來(lái)便于開(kāi)發(fā)中的數(shù)據(jù)處理,這一部分基本上全部都需要加載等待,因?yàn)橐嬖V客戶,數(shù)據(jù)正在下載
請(qǐng)求數(shù)據(jù)請(qǐng)求前的方法處理好了,請(qǐng)求后,返回的方法和網(wǎng)上的差不多都是返回結(jié)果時(shí)結(jié)束
處理掉一些干擾元素直接看攔截器的本質(zhì)內(nèi)容
攔截器的原理就是在發(fā)起請(qǐng)求的時(shí)候攔截一次,在返回的時(shí)候再攔截一次,在攔截器攔截前就已經(jīng)處理了加載等待了,請(qǐng)求時(shí)就不需要再調(diào)用加載等待了,只需要在返回?cái)r截時(shí)去調(diào)用結(jié)束加載等待,
如下圖:
再看看關(guān)鍵的加載等待的方法,這個(gè)方法網(wǎng)上都有,這邊基本上也是借用網(wǎng)上大神的方法,時(shí)間有點(diǎn)久,忘記是哪位大神的代碼了,這邊貼不了原地址大佬的代碼,希望那位大佬看到不會(huì)生氣
方法到這里基本上就結(jié)束了全局加載等待
到此這篇關(guān)于vue-element-admin 全局loading加載等待的文章就介紹到這了,更多相關(guān)vue-element-admin 全局loading 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 動(dòng)態(tài)添加/刪除dom元素節(jié)點(diǎn)的操作代碼
這篇文章主要介紹了vue 動(dòng)態(tài)添加/刪除dom元素,需要在點(diǎn)擊添加時(shí),增加一行key/value的輸入框;點(diǎn)擊垃圾桶圖標(biāo)時(shí),刪除對(duì)應(yīng)行,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2022-12-12vue實(shí)現(xiàn)大文件分片上傳與斷點(diǎn)續(xù)傳到七牛云
這篇文章介紹了vue實(shí)現(xiàn)大文件分片上傳與斷點(diǎn)續(xù)傳到七牛云的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06Vue 3項(xiàng)目如何安裝Element-Plus
Element Plus 是一個(gè)基于 Vue 3 的現(xiàn)代前端UI框架,它旨在提升開(kāi)發(fā)體驗(yàn),并為開(kāi)發(fā)者提供高效、優(yōu)雅的組件,在本文中將詳細(xì)介紹如何在 Vue 3 項(xiàng)目中安裝 Element Plus,感興趣的朋友一起看看吧2024-07-07vue3使用ref 獲取不到子組件屬性問(wèn)題的解決辦法
父子組件使用<script setup>語(yǔ)法糖,父組件通過(guò)給子組件定義ref訪問(wèn)子組件內(nèi)部屬性或事件,本文給大家介紹了解決vue3使用ref 獲取不到子組件屬性問(wèn)題,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-06-06vue3如何添加eslint校驗(yàn)(eslint-plugin-vue)
這篇文章主要介紹了vue3如何添加eslint校驗(yàn)(eslint-plugin-vue),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01vue element實(shí)現(xiàn)表格增加刪除修改數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue element實(shí)現(xiàn)表格增加刪除修改數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05