一文教你如何優(yōu)雅的控制全局loading的顯示
在很多后臺管理系統(tǒng)中,發(fā)送請求的時候,需要打開一個loading,收到響應后,需要關(guān)閉這個loading,對于這種通用的邏輯,我一般是在axios攔截器中做這種處理,因為不是每個請求都需要全局顯示loading,所以我在axios config中添加了一個標記showLoading, 用于標記發(fā)送請求之前是否需要顯示loading,自然收到響應后,根據(jù)這個標記確定是否需要關(guān)閉loading,在axios攔截器中的代碼如下:
axios.interceptors.request.use( (config) => { // config中不設置showLoading這個字段或者這個字段為true時,代表需要全局顯示loading if (config.headers.showLoading !== false) { // 全局顯示loading Loading.showLoading(); } return config; }, (err) => { return Promise.reject(err); }, ); instance.interceptors.response.use( (response) => { const { config: { headers } } = response; if (headers.showLoading !== false) { // 關(guān)閉全局的loading Loading.hideLoading(); } return data; } );
我自己自然覺得上面那個實現(xiàn)自然滿足要求了,但是偶然一次和后端同事聊起這個問題,后端同事說,這個前端的標記(showLoading)怎么能傳遞給后端服務器了,并且還說,如果是他和我對接,絕對不允許我這么做。然后我就懵逼了,因為想不到解決辦法。
直到后來了解到洋蔥模型,其實請求,響應天然的適用洋蔥模型,如果給axios添加上洋蔥模型,這個問題就自然而然解決了啊。下面講解如何給axios添加洋蔥模型,如果有了洋蔥模型,axios攔截器就沒有必要了,因為洋蔥模型比axios攔截器更好用。
- 聲明MiddleWareManager類,這個類是洋蔥模型的具體實現(xiàn),代碼如下。
// 中間件管理器,用于添加,刪除中間件。 // 另外這個添加的中間件給誰用,也需要用參數(shù)(job)保存起來。 class MiddleWareManager { // 添加的中間件是給誰用的,我們用job標識,如果中間件是給axios用,那么這個job就是axios方法。 // middleWares用來保存中間件。 // job和中間件都是返回Promise對象的方法。 // 其中,job接受一個參數(shù)config,由最后一個中間件傳遞。 // 中間件接受兩個參數(shù),一個是他之前的中間件傳遞的config,一個是執(zhí)行下一個中間件的方法。 constructor(job) { // 這里默認加上axios請求 this.job = job; this.middleWares = []; } use(middleWare) { this.middleWares.unshift(middleWare); return this; } remove(middleWare) { const index = this.middleWares.indexOf(middleWare); this.middleWares.splice(index, 1); return this; } run(config) { const { length } = this.middleWares; function innerRun(config, index) { // 如果中間件已經(jīng)執(zhí)行完畢,這直接job函數(shù)。 if (index >= length) { return this.job(config); } // 否則執(zhí)行下一個中間件函數(shù) return this.middleWares[index](config, (config) => innerRun(config, index++)); } innerRun(config, 0); } }
- MiddleWareManager已經(jīng)實現(xiàn),接下來是講解如何將MiddleWareManager和axios組合到一起使用。我們會定義一個request方法,當我們需要發(fā)送請求的時候,我們就統(tǒng)一調(diào)用request方法。
// middleWare1用于處理是否需要全局的顯示loading async function middleWare1(config, next) { // 查看config中是否有showLoading標記,如果沒有或者為true, 則需要全局顯示loading, // 當接收到響應后,自然需要關(guān)閉loading // 自然收到響應后,根據(jù)這個標記確定是否需要關(guān)閉loading const { showLoading, ...rest } = config; if (showLoading !== false) { // 顯示loading動畫 } const response = await next(rest); if (showLoading !== false) { // 關(guān)閉動畫 } return response; } // 組裝MiddleWareManager const manager = new MiddleWareManager(axios); manager.use(middleWare1); // 實現(xiàn)request方法,用于發(fā)送請求 function request(config) { return manager.run(config); }
- 當我們發(fā)送請求需要全局打開loading時,像如下做
request({ url: 'xxx', method: 'get' })
這樣在發(fā)送請求前,會自動打開loading,當接收到響應后,會自動關(guān)閉loading. 當我們不需要自動打開loading的功能時,我們只需要在發(fā)送請求時在config中添加showLoading: false就可以了,代碼如下
request({ url: 'xxx', method: 'get', showLoading: false })
這樣做是不是滿足了后端同事的要求了呢!并且洋蔥模型也比攔截器使用起來更加方便,特別是在請求和響應中訪問相同的變量的時候。就如我們例子中的showLoading. 當然我們也可以把攔截器中的更多功能移到洋蔥模型的中間件中,比如發(fā)送請求時,自動添加token。
總結(jié)
到此這篇關(guān)于如何優(yōu)雅的控制全局loading的顯示的文章就介紹到這了,更多相關(guān)控制全局loading顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說明
這篇文章主要介紹了Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue項目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用詳解
這篇文章主要介紹了vue項目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03vue-router嵌套路由方式(頁面路徑跳轉(zhuǎn)但頁面顯示空白)
這篇文章主要介紹了vue-router嵌套路由方式(頁面路徑跳轉(zhuǎn)但頁面顯示空白),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04安裝@vue/cli報錯npmERR gyp ERR問題及解決
這篇文章主要介紹了安裝@vue/cli報錯npmERR gyp ERR問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08vue圓環(huán)百分比進度條組件功能的實現(xiàn)
在一些頁面設置進度條效果給人一種很好的體驗效果,今天小編教大家vue圓環(huán)百分比進度條組件功能的實現(xiàn)代碼,代碼超級簡單啊,感興趣的朋友快來看下吧2021-05-05