axios如何取消重複請求
在開發中，經常會遇到介面重複請求導致的各種問題。
對於重複的get請求，會導致頁面更新多次，發生頁面抖動的現象，影響使用者體驗。
對於重複的post請求，會導致在服務端生成兩次記錄（例如生成兩條訂單記錄）。
如果當前頁面請求還未響應完成，就切換到了下乙個路由，那麼這些請求直到響應返回才會中止。
無論從使用者體驗或者從業務嚴謹方面來說，取消無用的請求確實是需要避免的。
axios 的 canceltoken
axios是乙個主流的http請求庫，它提供了兩種取消請求的方式。
通過axios.canceltoken.source生成取消令牌token和取消方法cancel
const canceltoken = axios.canceltoken;
const source = canceltoken.source();
axios.get(』/user/12345』, ).catch(function(thrown) else
});axios.post(』/user/12345』, , )
// cancel the request (the message parameter is optional)
source.cancel(『operation canceled by the user.』);
通過axios.canceltoken建構函式生成取消函式
const canceltoken = axios.canceltoken;
let cancel;
// cancel the request
cancel();
需要注意的是在catch中捕獲異常時，應該使用axios.iscancel()判斷當前請求是否是主動取消的，以此來區分普通的異常邏輯。
封裝取消請求邏輯
上面有兩種取消請求，用哪種都是可以的，這裡使用第二種。
取消請求主要有兩個場景：
當請求方式method，請求路徑url，請求引數（get為params，post為data）都相同時，可以視為同乙個請求傳送了多次，需要取消之前的請求
當路由切換時，需要取消上個路由中未完成的請求
我們封裝幾個方法：
// 宣告乙個 map 用於儲存每個請求的標識 和 取消函式
const pending = new map()
/**
在給config.canceltoken賦值的時候，需要判斷當前請求是否已經在業務**中使用了canceltoken
qs是乙個專門用來轉換物件和字串引數的庫，最初是由 tj 建立並維護的，也是axios推薦使用的引數序列化庫。這裡我們的目的只是單純的將引數物件轉換為字串方便拼接。
map結構預設部署了symbol.iterator屬性，可以使用for…of迴圈直接獲取鍵名和鍵值，當然你也可以使用for…in迴圈。
在 axios ***中使用
主要的方法已經寫好了，只需要新增到axios***中就可以了。
axios.interceptors.request.use(config => , error => )
axios.interceptors.response.use(response => , error => else
return promise.reject(error)
})將clearpending()方法新增到vue路由鉤子函式中
router.beforeeach((to, from, next) => )
測試效果
最後我們可以在瀏覽器中測試下，可以將chrome中控制面板的network的網路狀態切換為slow 3g來模擬網速慢的情況。
我們把查詢按鈕的loading或者disabled屬性乾掉來方便測試
cancel
在上面控制面板中可以看到，紅色的status為canceled的就是被取消的請求。
axios取消請求
let btns document.getelementsbytagname btn let cancel null btns 0 onclick function axios then response axios.get adata then ret query方式傳參和接收引數 傳參 this...
Axios取消請求ajax請求
使用者需要快速請求,比如搶購,前一次的請求資料是毫無意義的,直接取消就完事了 快速切換tab等操作選單後,如果前一次請求比後一次請求響應慢,資料就會對不上 index.js 如果前一次請求還未響應,先取消 this cancel this cancel message this axios main...
axios 主動取消請求
已經傳送的請求，在沒有收到後台返回之前主動取消。這樣的場景很常用。例如 乙個支付元件，正在支付的時候使用者立即又關閉了元件，這時應該立即取消支付請求。又或者tabs切換的時候，都是經常用到的。這裡我是用typescript來封裝的乙個簡單的axios請求做演示。api.js import axios...