最近遇到需求:

　　全局加載loading,所有接口都要可以手動(dòng)控制是否展示加載等待的功能

百度了一下,發(fā)現(xiàn)好多是寫(xiě)在攔截器內(nèi)的,在攔截器內(nèi)調(diào)用element ui的loading方法,在接口請(qǐng)求的時(shí)候開(kāi)始啟動(dòng)加載loading,在接口返回和接口報(bào)錯(cuò)拋異常的時(shí)候關(guān)閉loading

在這個(gè)思路上改動(dòng)了一下,因?yàn)楹臀业男枨笥幸稽c(diǎn)不同,我們的需求是可以手動(dòng)控制是否展示加載等待的功能,既然是手動(dòng)控制那么肯定不能直接在攔截器里面才開(kāi)始調(diào)用loading方法了,往前推一步,在調(diào)接口的時(shí)候就開(kāi)始控制是否啟用loading方法,我需要手動(dòng)封裝axios的調(diào)用,以前開(kāi)發(fā)的時(shí)候就封裝了axios, 代碼:

url:接口api,

data:參數(shù)

dom:html中的class或id傳參時(shí)需要加'./#',因?yàn)閘oading會(huì)用到j(luò)s的querySelector屬性方法,次屬性用于區(qū)分加載等待是整個(gè)頁(yè)面加載等待還是局部某一塊dom的加載等待---非必傳,默認(rèn)整個(gè)頁(yè)面加載等待

bool:區(qū)分是否開(kāi)啟加載等待----非必傳,默認(rèn)開(kāi)啟加載等待

圖片中我封裝了多個(gè)類型的axios,不是所有請(qǐng)求都需要加載等待,我這邊get請(qǐng)求默認(rèn)get請(qǐng)求是加載一些初始數(shù)據(jù)的,這些數(shù)據(jù)是不需要給客戶看到的;

我只在post內(nèi)加了這么多參數(shù)用于區(qū)分是否需要加載等待及全局和局部加載等待,另外axiosDownload請(qǐng)求是文件流類型,屬于比較特殊請(qǐng)求,區(qū)分出來(lái)便于開(kāi)發(fā)中的數(shù)據(jù)處理,這一部分基本上全部都需要加載等待,因?yàn)橐嬖V客戶,數(shù)據(jù)正在下載

請(qǐng)求數(shù)據(jù)請(qǐng)求前的方法處理好了,請(qǐng)求后,返回的方法和網(wǎng)上的差不多都是返回結(jié)果時(shí)結(jié)束

處理掉一些干擾元素直接看攔截器的本質(zhì)內(nèi)容

攔截器的原理就是在發(fā)起請(qǐng)求的時(shí)候攔截一次,在返回的時(shí)候再攔截一次,在攔截器攔截前就已經(jīng)處理了加載等待了,請(qǐng)求時(shí)就不需要再調(diào)用加載等待了,只需要在返回?cái)r截時(shí)去調(diào)用結(jié)束加載等待,

如下圖:

再看看關(guān)鍵的加載等待的方法,這個(gè)方法網(wǎng)上都有,這邊基本上也是借用網(wǎng)上大神的方法,時(shí)間有點(diǎn)久,忘記是哪位大神的代碼了,這邊貼不了原地址大佬的代碼,希望那位大佬看到不會(huì)生氣

方法到這里基本上就結(jié)束了全局加載等待

到此這篇關(guān)于vue-element-admin 全局loading加載等待的文章就介紹到這了,更多相關(guān)vue-element-admin 全局loading 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論