資訊專(zhuān)欄INFORMATION COLUMN
摘要：更多文章一般情況下，在中結(jié)合的攔截器控制展示和關(guān)閉，是這樣的在配置一個(gè)全局。但同時(shí)有多個(gè)請(qǐng)求并發(fā)，就會(huì)有問(wèn)題了?，F(xiàn)在有一個(gè)請(qǐng)求結(jié)束了。這樣即可解決，多個(gè)請(qǐng)求下有某個(gè)請(qǐng)求提前結(jié)束，導(dǎo)致關(guān)閉的問(wèn)題。
更多文章
一般情況下，在 vue 中結(jié)合 axios 的攔截器控制 loading 展示和關(guān)閉，是這樣的：
在 App.vue 配置一個(gè)全局 loading。
同時(shí)設(shè)置 axios 攔截器。
// 添加請(qǐng)求攔截器
this.$axios.interceptors.request.use(config => {
this.isShowLoading = true
return config
}, error => {
this.isShowLoading = false
return Promise.reject(error)
})
// 添加響應(yīng)攔截器
this.$axios.interceptors.response.use(response => {
this.isShowLoading = false
return response
}, error => {
this.isShowLoading = false
return Promise.reject(error)
})
這個(gè)攔截器的功能是在請(qǐng)求前打開(kāi) loading，請(qǐng)求結(jié)束或出錯(cuò)時(shí)關(guān)閉 loading。
如果每次只有一個(gè)請(qǐng)求，這樣運(yùn)行是沒(méi)問(wèn)題的。但同時(shí)有多個(gè)請(qǐng)求并發(fā)，就會(huì)有問(wèn)題了。
舉例：
假如現(xiàn)在同時(shí)發(fā)起兩個(gè)請(qǐng)求，在請(qǐng)求前，攔截器 this.isShowLoading = true 將 loading 打開(kāi)。
現(xiàn)在有一個(gè)請(qǐng)求結(jié)束了。this.isShowLoading = false 攔截器關(guān)閉 loading，但是另一個(gè)請(qǐng)求由于某些原因并沒(méi)有結(jié)束。
造成的后果就是頁(yè)面請(qǐng)求還沒(méi)完成，loading 卻關(guān)閉了，用戶會(huì)以為頁(yè)面加載完成了，結(jié)果頁(yè)面不能正常運(yùn)行，導(dǎo)致用戶體驗(yàn)不好。
解決方案
增加一個(gè) loadingCount 變量，用來(lái)計(jì)算請(qǐng)求的次數(shù)。
loadingCount: 0
再增加兩個(gè)方法，來(lái)對(duì) loadingCount 進(jìn)行增減操作。
methods: {
addLoading() {
this.isShowLoading = true
this.loadingCount++
},
isCloseLoading() {
this.loadingCount--
if (this.loadingCount == 0) {
this.isShowLoading = false
}
}
}
現(xiàn)在攔截器變成這樣：
// 添加請(qǐng)求攔截器
this.$axios.interceptors.request.use(config => {
this.addLoading()
return config
}, error => {
this.isShowLoading = false
this.loadingCount = 0
this.$Message.error("網(wǎng)絡(luò)異常，請(qǐng)稍后再試")
return Promise.reject(error)
})
// 添加響應(yīng)攔截器
this.$axios.interceptors.response.use(response => {
this.isCloseLoading()
return response
}, error => {
this.isShowLoading = false
this.loadingCount = 0
this.$Message.error("網(wǎng)絡(luò)異常，請(qǐng)稍后再試")
return Promise.reject(error)
})
這個(gè)攔截器的功能是：
每當(dāng)發(fā)起一個(gè)請(qǐng)求，打開(kāi) loading，同時(shí) loadingCount 加1。
每當(dāng)一個(gè)請(qǐng)求結(jié)束， loadingCount 減1，并判斷 loadingCount 是否為 0，如果為 0，則關(guān)閉 loading。
這樣即可解決，多個(gè)請(qǐng)求下有某個(gè)請(qǐng)求提前結(jié)束，導(dǎo)致 loading 關(guān)閉的問(wèn)題。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104517.html
摘要：例如下拉框的顯示與關(guān)閉。如何設(shè)計(jì)結(jié)構(gòu)在使用的過(guò)程中，我們都會(huì)使用的方式，將我們的拆分到不同的文件當(dāng)中，通常會(huì)遵循高內(nèi)聚方便使用的原則，按某個(gè)功能模塊頁(yè)面來(lái)劃分。 為什么使用redux 使用react構(gòu)建大型應(yīng)用，勢(shì)必會(huì)面臨狀態(tài)管理的問(wèn)題，redux是常用的一種狀態(tài)管理庫(kù)，我們會(huì)因?yàn)楦鞣N原因而需要使用它。 不同的組件可能會(huì)使用相同的數(shù)據(jù)，使用redux能更好的復(fù)用數(shù)據(jù)和保持?jǐn)?shù)據(jù)的同步 ...
摘要：簡(jiǎn)單點(diǎn)說(shuō)呢，就是與后端的數(shù)據(jù)交互和怎么把數(shù)據(jù)展示出來(lái)，用到的資源主要是和，其它參考插件使用。當(dāng)時(shí)，加載中的提示就會(huì)出現(xiàn)。后端返回的數(shù)據(jù)如上圖，并不是所有的字段都是可以進(jìn)行搜索的字段。 1.前言 今天要做的，就是在上一篇文章的基礎(chǔ)上，進(jìn)行功能頁(yè)面的開(kāi)發(fā)。簡(jiǎn)單點(diǎn)說(shuō)呢，就是與后端的數(shù)據(jù)交互和怎么把數(shù)據(jù)展示出來(lái)，用到的資源主要是element-ui和vue-resource，其它參考（vue-...
摘要：二項(xiàng)目的實(shí)現(xiàn)方式取消請(qǐng)求取消前一個(gè)請(qǐng)求保存當(dāng)前請(qǐng)求如果被攔截，則不處理業(yè)務(wù)邏輯區(qū)分請(qǐng)求返回的錯(cuò)誤信息，如果是取消請(qǐng)求導(dǎo)致的，則一直處于狀態(tài)，如果返回錯(cuò)誤信息，則關(guān)閉顯示未查到相關(guān)數(shù)據(jù)。 一、開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)碰到這樣的業(yè)務(wù)場(chǎng)景：多次觸發(fā)查詢(xún)按鈕時(shí)，取消其他查詢(xún)請(qǐng)求，只保留最后一個(gè)。如果涉及到圖表展示的，邏輯會(huì)稍需要一些處理，比如點(diǎn)擊查詢(xún)，顯示loading，請(qǐng)求回來(lái)后，有數(shù)據(jù)則展示數(shù)據(jù)...
摘要：如果返回的被拒，另一個(gè)同步事件被自動(dòng)地開(kāi)始重試操作，直到返回一個(gè)成功狀態(tài)的。推送機(jī)制使得服務(wù)器能夠向發(fā)送信息，然后將信息展示給用戶才是消息通知。然后它們可以發(fā)送消息通知，或者是更新的狀態(tài)。 原文地址：https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-...
閱讀 1915·2021-09-27 13:35
閱讀 3444·2019-08-30 14:16
閱讀 2495·2019-08-30 10:52
閱讀 877·2019-08-29 16:35
閱讀 1429·2019-08-29 15:22
閱讀 3653·2019-08-23 18:21
閱讀 3149·2019-08-23 18:00
閱讀 3134·2019-08-23 16:50
