axios取消某個發送的http請求和響應

需求場景

用戶在點擊購買或者其餘操做的時候,http響應比較慢

在沒有收到反饋前,用戶點擊返回或者跳轉到其餘頁面時,中斷當前頁面的請求和響應

實例化CancelToken

首頁須要實例化一個CancelToken

import axios from "axios";
const CancelToken = axios.CancelToken;
複製代碼

發起請求

而後在發起某個請求時調用

建立一個變量如cancel用於存儲這個請求的取消方法

let cancel;
axios.get('/testApi', {
 	cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});
複製代碼

調用CancelToken

在須要取消的時候調用該變量便可

建議先作類型判斷,而後充值爲初始值,確保axios已實例化一個CancelToken

if (typeof cancel===`function`){
	cancel()
	cancel=null
}
複製代碼

查看http狀態

在chrome控制面板中,能夠看到請求取消的狀態

參考文檔

axios文檔地址: www.axios-js.com/docs/