用AxiosElement實現全局的請求loading的方法

背景

業務需求是這樣子的，每當發請求到后端時就觸發一個全屏的 loading，多個請求合并為一次 loading。

現在項目中用的是 vue 、axios、element等，所以文章主要是講如果使用 axios 和 element 實現這個功能。

效果如下：

分析

首先，請求開始的時候開始 loading， 然后在請求返回后結束 loading。重點就是要攔截請求和響應。

然后，要解決多個請求合并為一次 loading。

最后，調用element 的 loading 組件即可。

攔截請求和響應

axios 的基本使用方法不贅述。筆者在項目中使用 axios 是以創建實例的方式。

然后再封裝 post 請求（以 post 為例）

axios 提供了請求攔截和響應攔截的接口，每次請求都會調用showFullScreenLoading方法，每次響應都會調用tryHideFullScreenLoading()方法

那么showFullScreenLoading tryHideFullScreenLoading()要干的事兒就是將同一時刻的請求合并。聲明一個變量needLoadingRequestCount，每次調用showFullScreenLoading方法 needLoadingRequestCount + 1。調用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount為 0 時，結束 loading。

startLoading()和endLoading()就是調用 element 的 loading 方法。

到這里，基本功能已經實現了。每發一個 post 請求，都會顯示全屏 loading。同一時刻的多個請求合并為一次 loading，在所有響應都返回后，結束 loading。

功能增強

實際上，現在的功能還差一點。如果某個請求不需要 loading 呢，那么發請求的時候加個 showLoading： false的參數就好了。在請求攔截和響應攔截時判斷下該請求是否需要loading，需要 loading 再去調用showFullScreenLoading()方法即可。

在封裝 post 請求時，已經在第三個參數加了 config 對象。config 里包含了 showloading。然后在攔截器中分別處理。

我們在調用 axios 時把 config 放在第三個參數中，axios 會直接把 showloading 放在請求攔截器的回調參數里，可以直接使用。在響應攔截器中的回調參數 response 中則是有一個 config 的 key。這個 config 則是和請求攔截器的回調參數 config 一樣。

上面是我整理給大家的，希望今后會對大家有幫助。

相關文章：

詳解Vue 全局引入bass.scss 處理方案

js構建二叉樹進行數值數組的去重與優化詳解

紅黑樹的插入詳解及Javascript實現方法示例

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com