最近遇到需求:
全域性載入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請求是檔案流型別,屬於比較特殊請求,區分出來便於開發中的資料處理,這一部分基本上全部都需要載入等待,因為要告訴客戶,資料正在下載請求資料
請求前的方法處理好了,請求後,返回的方法和網上的差不多都是返回結果時結束
處理掉一些干擾元素直接看攔截器的本質內容
攔截器的原理就是在發起請求的時候攔截一次,在返回的時候再攔截一次,在攔截器攔截前就已經處理了載入等待了,請求時就不需要再呼叫載入等待了,只需要在返回攔截時去呼叫結束載入等待,
如下圖:
再看看關鍵的載入等待的方法,這個方法網上都有,這邊基本上也是借用網上大神的方法,時間有點久,忘記是哪位大神的程式碼了,這邊貼不了原地址大佬的程式碼,希望那位大佬看到不會生氣
方法到這裡基本上就結束了全域性載入等待
本文出自於https://www.cnblogs.com/sws-kevin/p/15267369.html 轉載請註明出處,否則會追究。