1. 程式人生 > 其它 >取消ajax請求

取消ajax請求

1. 原生xhr取消請求
var xhr = new XMLHttpRequest();
xhr.abort();
2. jquery需求請求
var jq = $.ajax({
})
jp.abort();
3. axios取消請求
3.1 使用 CancelToken.source 工廠方法建立 cancel token
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/123', {
    cancelToken: source.token
}).
catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 處理錯誤 } }); axios.post('/user/123', { name: '小明' }, { cancelToken: source.token }) // 取消請求(message 引數是可選的) source.cancel('canceled by the user.');
  3.2 傳遞一個 executor 函式到 CancelToken 的建構函式來建立 cancel token
const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函式接收一個 cancel 函式作為引數
    cancel = c;
  })
});

// cancel the request
cancel();
取消ajax請求的意義
1. 已發出的請求可能仍然會到達後端
2. 取消後續的回撥處理,避免多餘的回撥處理,以及特殊情況,先發出的後返回,導致回撥中的資料錯誤覆蓋
3. 取消loading效果,以及該請求的其他互動效果,特別是在單頁應用中,A頁面跳轉到B頁面之後,A頁面的請求應該取消,否則回撥中的一些處理可能影響B頁面
4. 超時處理,錯誤處理等都省去了,節約資源     參考:https://juejin.cn/post/6992745514731061285