最近遇到需求:

　　全域性載入loading,所有介面都要可以手動控制是否展示載入等待的功能

當拿到這個需求的時候我是拒絕的,因為我以及區域性寫好了0.0,這是要大改呀....,沒辦法老闆的要求,只能硬著頭皮改了;老規矩先去百度一下廣大開發的思路,我發現好多開發是直接寫在攔截器內的,在攔截器內呼叫element ui的loading方法,在介面請求的時候開始啟動載入loading,在介面返回和介面報錯拋異常的時候關閉loading,............嗯......不錯不錯.我要了

我在大家的思路上稍微改動了一下,因為和我的需求有一點不同,我們的需求是可以手動控制是否展示載入等待的功能,既然是手動控制那麼肯定不能直接在攔截器裡面才開始呼叫loading方法了,往前推一步,在調介面的時候就開始控制是否啟用loading方法,如果需要這麼操作的話我們就需要手動封裝axios的呼叫,還好我有先見之明,以前開發的時候就封裝了axios下面給大家看一下我的程式碼:

import request from '@/utils/PFT_request'---------攔截器
import { showLoading } from '@/utils/loading'------載入等待開啟方法
url:介面api,
data:引數
dom:html中的class或id傳參時需要加'./#',因為loading會用到js的querySelector屬性方法,次屬性用於區分載入等待是整個頁面載入等待還是區域性某一塊dom的載入等待---非必傳,預設整個頁面載入等待
bool:區分是否開啟載入等待----非必傳,預設開啟載入等待
可以看到圖片中我封裝了多個型別的axios,因為並不是所有請求都需要載入等待,例如get請求,我們公司get請求預設get請求是載入一些初始資料的,這些資料是不需要給客戶看到的如果也有載入等待的話,體驗就不好了;
我只在post內加了這麼多引數用於區分是否需要載入等待及全域性和區域性載入等待,另外axiosDownload請求是檔案流型別,屬於比較特殊請求,區分出來便於開發中的資料處理,這一部分基本上全部都需要載入等待,因為我們要告訴客戶,您的資料正在下載請求資料
 
請求前的方法我們處理好了,請求後,返回的方法和網上的差不多都是返回結果時結束
我們來處理掉一些干擾元素直接看攔截器的本質內容

這麼一看就清晰多了,攔截器的原理就是在發起請求的時候攔截一次,在返回的時候再攔截一次,我們在攔截器攔截前就已經處理了載入等待了,我們請求時就不需要再呼叫載入等待了,我們只需要在返回攔截時去呼叫結束載入等待即可,如下圖:

下面我們在看看關鍵的載入等待的方法,這個方法網上都有,我這邊基本上也是借用網上大神的方法,不過時間有點久,忘記是哪位大神的程式碼了,我這邊貼不了原地址大佬的程式碼,希望那位大佬看到不會生氣0.0

方法到這裡基本上就結束了全域性載入等待

 
 本文出自於https://www.cnblogs.com/sws-kevin/p/14237428.html 轉載請註明出處,否則會追究。