取消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