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