vue-element-admin 全局loading加載等待
最近遇到需求:
全局加載loading,所有接口都要可以手動控制是否展示加載等待的功能
百度了一下,發現好多是寫在攔截器內的,在攔截器內調用element ui的loading方法,在接口請求的時候開始啟動加載loading,在接口返回和接口報錯拋異常的時候關閉loading
在這個思路上改動了一下,因為和我的需求有一點不同,我們的需求是可以手動控制是否展示加載等待的功能,既然是手動控制那麼肯定不能直接在攔截器裏面才開始調用loading方法了,往前推一步,在調接口的時候就開始控制是否啟用loading方法,我需要手動封裝axios的調用,以前開發的時候就封裝了axios, 代碼:
url:接口api,
data:參數
dom:html中的class或id傳參時需要加’./#’,因為loading會用到js的querySelector屬性方法,次屬性用於區分加載等待是整個頁面加載等待還是局部某一塊dom的加載等待—非必傳,默認整個頁面加載等待
bool:區分是否開啟加載等待—-非必傳,默認開啟加載等待
圖片中我封裝了多個類型的axios,不是所有請求都需要加載等待,我這邊get請求默認get請求是加載一些初始數據的,這些數據是不需要給客戶看到的;
我只在post內加了這麼多參數用於區分是否需要加載等待及全局和局部加載等待,另外axiosDownload請求是文件流類型,屬於比較特殊請求,區分出來便於開發中的數據處理,這一部分基本上全部都需要加載等待,因為要告訴客戶,數據正在下載請求數據
請求前的方法處理好了,請求後,返回的方法和網上的差不多都是返回結果時結束
處理掉一些干擾元素直接看攔截器的本質內容
攔截器的原理就是在發起請求的時候攔截一次,在返回的時候再攔截一次,在攔截器攔截前就已經處理了加載等待了,請求時就不需要再調用加載等待了,只需要在返回攔截時去調用結束加載等待,
如下圖:
再看看關鍵的加載等待的方法,這個方法網上都有,這邊基本上也是借用網上大神的方法,時間有點久,忘記是哪位大神的代碼了,這邊貼不了原地址大佬的代碼,希望那位大佬看到不會生氣
方法到這裡基本上就結束了全局加載等待
本文出自於//www.cnblogs.com/sws-kevin/p/15267369.html 轉載請註明出處,否則會追究。
