多個請求下 loading 的展示與關閉

G9YH 發布于2019-08-23 18:00 / 3131人閱讀

摘要：更多文章一般情況下，在中結合的攔截器控制展示和關閉，是這樣的在配置一個全局。但同時有多個請求并發，就會有問題了。現在有一個請求結束了。這樣即可解決，多個請求下有某個請求提前結束，導致關閉的問題。

更多文章

一般情況下，在 vue 中結合 axios 的攔截器控制 loading 展示和關閉，是這樣的：
在 App.vue 配置一個全局 loading。

同時設置 axios 攔截器。

 // 添加請求攔截器
 this.$axios.interceptors.request.use(config => {
     this.isShowLoading = true
     return config
 }, error => {
     this.isShowLoading = false
     return Promise.reject(error)
 })

 // 添加響應攔截器
 this.$axios.interceptors.response.use(response => {
     this.isShowLoading = false
     return response
 }, error => {
     this.isShowLoading = false
     return Promise.reject(error)
 })

這個攔截器的功能是在請求前打開 loading，請求結束或出錯時關閉 loading。
如果每次只有一個請求，這樣運行是沒問題的。但同時有多個請求并發，就會有問題了。

舉例：

假如現在同時發起兩個請求，在請求前，攔截器 this.isShowLoading = true 將 loading 打開。
現在有一個請求結束了。this.isShowLoading = false 攔截器關閉 loading，但是另一個請求由于某些原因并沒有結束。
造成的后果就是頁面請求還沒完成，loading 卻關閉了，用戶會以為頁面加載完成了，結果頁面不能正常運行，導致用戶體驗不好。

解決方案
增加一個 loadingCount 變量，用來計算請求的次數。

loadingCount: 0

再增加兩個方法，來對 loadingCount 進行增減操作。

    methods: {
        addLoading() {
            this.isShowLoading = true
            this.loadingCount++
        },

        isCloseLoading() {
            this.loadingCount--
            if (this.loadingCount == 0) {
                this.isShowLoading = false
            }
        }
    }

現在攔截器變成這樣：

        // 添加請求攔截器
        this.$axios.interceptors.request.use(config => {
            this.addLoading()
            return config
        }, error => {
            this.isShowLoading = false
            this.loadingCount = 0
            this.$Message.error("網絡異常，請稍后再試")
            return Promise.reject(error)
        })

        // 添加響應攔截器
        this.$axios.interceptors.response.use(response => {
            this.isCloseLoading()
            return response
        }, error => {
            this.isShowLoading = false
            this.loadingCount = 0
            this.$Message.error("網絡異常，請稍后再試")
            return Promise.reject(error)
        })

這個攔截器的功能是：
每當發起一個請求，打開 loading，同時 loadingCount 加1。
每當一個請求結束， loadingCount 減1，并判斷 loadingCount 是否為 0，如果為 0，則關閉 loading。
這樣即可解決，多個請求下有某個請求提前結束，導致 loading 關閉的問題。

云服務器 GPU云服務器數據的整理與展示關閉展示頁大數據互聯網時代下的文化與傳播大數據下人工智能與心理學的聯系

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104517.html

如何設計redux state結構

摘要：例如下拉框的顯示與關閉。如何設計結構在使用的過程中，我們都會使用的方式，將我們的拆分到不同的文件當中，通常會遵循高內聚方便使用的原則，按某個功能模塊頁面來劃分。為什么使用redux 使用react構建大型應用，勢必會面臨狀態管理的問題，redux是常用的一種狀態管理庫，我們會因為各種原因而需要使用它。不同的組件可能會使用相同的數據，使用redux能更好的復用數據和保持數據的同步 ...

huangjinnan 2019-08-26 13:44 評論0 收藏0
webpack+vue項目實戰（四，前端與后端的數據交互和前端展示數據）

摘要：簡單點說呢，就是與后端的數據交互和怎么把數據展示出來，用到的資源主要是和，其它參考插件使用。當時，加載中的提示就會出現。后端返回的數據如上圖，并不是所有的字段都是可以進行搜索的字段。 1.前言今天要做的，就是在上一篇文章的基礎上，進行功能頁面的開發。簡單點說呢，就是與后端的數據交互和怎么把數據展示出來，用到的資源主要是element-ui和vue-resource，其它參考（vue-...

Yumenokanata 2019-08-20 17:47 評論0 收藏0
CancelToken與interceptors實現請求取消

摘要：二項目的實現方式取消請求取消前一個請求保存當前請求如果被攔截，則不處理業務邏輯區分請求返回的錯誤信息，如果是取消請求導致的，則一直處于狀態，如果返回錯誤信息，則關閉顯示未查到相關數據。一、開發過程中，經常會碰到這樣的業務場景：多次觸發查詢按鈕時，取消其他查詢請求，只保留最后一個。如果涉及到圖表展示的，邏輯會稍需要一些處理，比如點擊查詢，顯示loading，請求回來后，有數據則展示數據...

anonymoussf 2019-08-26 13:45 評論0 收藏0
[翻譯]Service workers：PWA背后的英雄

摘要：如果返回的被拒，另一個同步事件被自動地開始重試操作，直到返回一個成功狀態的。推送機制使得服務器能夠向發送信息，然后將信息展示給用戶才是消息通知。然后它們可以發送消息通知，或者是更新的狀態。原文地址：https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-...

snifes 2019-08-22 14:48 評論0 收藏0