資訊專欄INFORMATION COLUMN
摘要：二項(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ù)。
一、開發(fā)過程中，經(jīng)常會(huì)碰到這樣的業(yè)務(wù)場景：
多次觸發(fā)查詢按鈕時(shí)，取消其他查詢請(qǐng)求，只保留最后一個(gè)。如果涉及到圖表展示的，邏輯會(huì)稍需要一些處理，比如點(diǎn)擊查詢，顯示loading，請(qǐng)求回來后，有數(shù)據(jù)則展示數(shù)據(jù)，無數(shù)據(jù)或者返回錯(cuò)誤信息則顯示未查到相關(guān)數(shù)據(jù)。
二、vue項(xiàng)目的實(shí)現(xiàn)方式
取消請(qǐng)求
if (this.cancelRequest){
this.cancelRequest() //取消前一個(gè)請(qǐng)求
}
let CancelToken = axios.CancelToken
this.$axios({
method: "post",
url: "/login/login",
params: obj,
cancelToken: new CancelToken((c)=>{
this.cancelRequest = c //保存當(dāng)前請(qǐng)求
})
}).then((res)=>{
if(!res)return; //如果res被攔截，則不處理
//業(yè)務(wù)邏輯
}).catch((res)=>{
this.loading = false
})
2、區(qū)分請(qǐng)求返回的錯(cuò)誤信息，如果是取消請(qǐng)求導(dǎo)致的，則一直處于loading狀態(tài)，如果返回錯(cuò)誤信息，則關(guān)閉loading,顯示未查到相關(guān)數(shù)據(jù)。
怎么區(qū)分錯(cuò)誤信息呢，axios有一個(gè)方法isCalcel可以判斷是不是由取消請(qǐng)求導(dǎo)致的錯(cuò)誤信息。
代碼如下：
axios.interceptors.reaponse.use((res)=>{
//請(qǐng)求攔截的代碼
},(err)=>{
if(!axios.isCancel(err) { //只攔截取消請(qǐng)求導(dǎo)致的錯(cuò)誤信息
return err //這里如果沒有return,響應(yīng)回調(diào)函數(shù)里的res為undefined
})
})
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109466.html
摘要：使用了攔截器處理相關(guān)問題，這樣就不再需要使用來做錯(cuò)誤的處理。萬惡的攔截器一些處理無論是對(duì)成功的處理還是對(duì)失敗的處理，如果攔截器不拋出錯(cuò)誤，那么終將還會(huì)執(zhí)行里面處理請(qǐng)求成功的函數(shù)，即使你返回。 一 前言 本文適合剛接觸axios或者使用過幾次的同學(xué)來分享交流一些入門經(jīng)驗(yàn)，本文同樣適用熟悉axios的同學(xué)來作為參考手冊(cè)。默認(rèn)你已經(jīng)看過axios的相關(guān)文檔：axios文檔 GitHub，通過...
摘要：我們先來看看構(gòu)造函數(shù)構(gòu)造函數(shù)就是用來實(shí)現(xiàn)攔截器的，這個(gè)構(gòu)造函數(shù)原型上有個(gè)方法。關(guān)于源碼，其實(shí)是比較簡單的，都是用來操作該構(gòu)造函數(shù)的實(shí)例屬性的。存放攔截器方法，數(shù)組內(nèi)每一項(xiàng)都是有兩個(gè)屬性的對(duì)象，兩個(gè)屬性分別對(duì)應(yīng)成功和失敗后執(zhí)行的函數(shù)。 Axios源碼分析 - XHR篇 文章源碼托管在github上，歡迎fork指正！ axios 是一個(gè)基于 Promise 的http請(qǐng)求庫，可以用在瀏覽...
摘要：接上篇議題合理的架構(gòu)討論上傳送門。處理思路如下使用上面定義的方法獲取如果能獲取到則說明有有效的，則時(shí)候即可跳轉(zhuǎn)到目標(biāo)頁如果獲取到空字符串，則說明無效或不存在，跳轉(zhuǎn)至登錄頁面。 接上篇《【Geek議題】合理的VueSPA架構(gòu)討論（上）》傳送門。 自動(dòng)化維護(hù)登錄狀態(tài) 登錄狀態(tài)標(biāo)識(shí)符跟token類似，都是需要自動(dòng)維護(hù)有效期，但也有些許不同，獲取過程只在用戶登錄或注冊(cè)的時(shí)候，不需要自動(dòng)獲取。 ...
閱讀 1168·2023-04-25 14:45
閱讀 2946·2021-09-30 09:59
閱讀 3222·2021-09-22 15:48
閱讀 2529·2019-08-30 15:55
閱讀 3665·2019-08-30 15:44
閱讀 652·2019-08-29 14:07
閱讀 3506·2019-08-26 13:45
閱讀 630·2019-08-26 11:31
