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