loading展示和取消是前端對接口時(shí)常關(guān)注的問題之一。本文將介紹如何結(jié)合axios更簡潔地處理loading展示和取消的邏輯。通常情況下，loading可以分為按鈕loading、局部loading和全局loading。

按鈕loading：通常我們會在按鈕loading的業(yè)務(wù)中使用以下方式：

或者：

上述代碼中，我們需要處理loading的開始和結(jié)束狀態(tài)，并且許多接口都需要編寫類似的代碼，顯得冗瑣。那么有沒有更簡潔的方式呢？

在Vue 3中，我們可以這樣改進(jìn)：

通過將loading狀態(tài)傳遞給axios來統(tǒng)一處理loading。這樣代碼更簡潔。具體實(shí)現(xiàn)方式如下：

在axios的攔截器中修改loading的值即可，需要注意傳入一個(gè)ref類型的值。這種寫法僅適用于Vue 3，對于Vue 2來說是不行的。

在Vue 2中，我們可能會考慮以下方式：

然而很遺憾，這樣是無效的。原因是axios在進(jìn)行深拷貝時(shí)，并沒有處理RefImpl類的實(shí)例對象，因此在攔截器中的修改無效。但為什么Vue 3可以呢？因?yàn)閂ue 3返回的是RefImpl類的實(shí)例對象，而axios在深拷貝時(shí)沒有處理這種實(shí)例對象。因此，我們可以從這里入手改進(jìn)axios的寫法。代碼如下：

上述代碼對axios的post函數(shù)進(jìn)行了二次封裝。在調(diào)用接口時(shí)添加了loading，并將傳入的loading對象轉(zhuǎn)換成一個(gè)實(shí)例對象，在實(shí)例對象中記錄傳入的對象，從而實(shí)現(xiàn)響應(yīng)式。

高階函數(shù)版本：以上方案看起來還不夠友好。如果不拘泥于在攔截器中封裝，可以采用以下高階函數(shù)方式：

以上代碼只是一種思路，我們可以使用高階函數(shù)對axios的post函數(shù)進(jìn)行二次封裝。對于get等函數(shù)也是類似的，這里不一一舉例。

局部loading的添加有兩種方式：

1. 使用自定義指令傳入true和false，但這種方式不夠靈活，只能全局添加，無法在組件內(nèi)的特定元素上添加loading。

2. 在axios中封裝，每次調(diào)用接口時(shí)傳入需要添加loading的DOM元素，接口調(diào)用完成后刪除DOM元素。

   
   

實(shí)現(xiàn)方法如下：

假設(shè)我們使用Vue 3和AntdV3技術(shù)棧進(jìn)行封裝。下面的代碼使用了hooks將設(shè)置和刪除loading的邏輯拆分出來。

axios代碼：

hooks代碼：

以上是基礎(chǔ)邏輯，非常簡單。只需在接口請求時(shí)添加loading，接口響應(yīng)完成后刪除loading。然而，可能會遇到多個(gè)接口同時(shí)請求或一個(gè)接口頻繁請求需要覆蓋相同的DOM元素的情況。這會導(dǎo)致添加的loading重疊顯示。因此，上述代碼定義了一個(gè)loadingDom對象，用于記錄當(dāng)前正在loading的DOM元素。如果有相同的DOM元素進(jìn)來，就增加計(jì)數(shù)；完成后，計(jì)數(shù)減一。當(dāng)計(jì)數(shù)為零時(shí)，刪除loading。

以下是使用示例代碼：

上述示例中，我們在兩個(gè)DOM元素上分別綁定了ref，在組件內(nèi)部通過head_dom和card_dom獲取DOM元素的引用。然后，通過調(diào)用post函數(shù)傳入dom選項(xiàng)來添加局部loading。

接下來，簡單解釋一下QSpin組件的代碼：

以上代碼對AntdV3的Spin組件進(jìn)行了簡單的二次封裝。主要實(shí)現(xiàn)了局部loading覆蓋傳入的DOM元素的功能。

需要注意的是，一般情況下，我們使用相對定位和絕對定位的組合來實(shí)現(xiàn)loading效果。但是，本例中使用了transform和fixed定位的組合方式。原因是在項(xiàng)目中可能出現(xiàn)以下情況：

假設(shè)我們要給中間的div添加loading，使用相對定位和絕對定位的方式，中間div會添加position: relative屬性。結(jié)果如下：

很明顯，第三層div的定位根節(jié)點(diǎn)從第一層變成了第二層，導(dǎo)致樣式錯(cuò)亂。因此，本例中使用了transform和fixed定位的組合方式，雖然這種情況仍可能出現(xiàn)，但幾率大大降低。

全局loading：

全局loading很簡單，如果已經(jīng)封裝好了局部loading，只需在配置項(xiàng)的dom中傳入document.body即可。

感謝閱讀本文，如果對你有幫助，請點(diǎn)贊和收藏??。讓我們一起在前端的道路上不斷前行，共同成長！