ajax axios XMLHttpRequest停止发送中的请求

XMLHttpRequest.abort()

let MyXhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://baidu.abc.com/abc"; //示例接口
MyXhr.open(method,url,true);
 
MyXhr.send();
 
MyXhr.abort(); // 终止请求

ajax.abort()

let url = 'https://baidu.abc.com/abc' // 实例接口
let queryAjax
if(queryAjax){
    queryAjax.abort() // 终止请求
}
queryAjax =  $.ajax({
    type: "POST",
    url:url,
    dataType: "json",
    success: function(data) {
        do ...
    },
    error: function () {
    }
})

axios.cancelToken()

axios有一个CancelToken属性，他是一个类，用于获取取消请求的cancel方法，获取了该方法之后就可以在合适的地方执行cancel()取消请求了。这种方式比较麻烦，但是可以用于取消多个请求，你可以将c这个取消请求的方法push进一个数组，然后在你需要取消多个请求的时候，循环这个数组，依次执行里面的方法即可取消多个请求。
 

const CancelToken = axios.CancelToken
let cancel

axios.get('/list', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c
  })
});

cancel()

1. CancelToken有一个source静态方法，调用之后返回一个对象，该对象包含一个token属性，用于标记请求和一个cancel方法，用于取消请求。

const CancelToken = axios.CancelToken
const source = CancelToken.source()

axios.get('/list', {
  cancelToken: source.token
})

source.cancel()

1. cancel取消请求方法在调用取消请求的时候可以将取消原因——message字符串传递进去，这样请求在被取消之后会被catch捕获，你可以在这里将取消原因打印出来或者提示给用户，比如提示用户不要频繁点击发送请求。

   const CancelToken = axios.CancelToken
   const source = CancelToken.source()
   
   axios.get('/list/id005', {
     cancelToken: source.token
   }).catch(err => {
     // 判断这个错误是取消请求导致的还是其他原因导致
     if (axios.isCancel(thrown)) {
       console.log(err.message)
     }
   });
   
   // 取消请求（message 参数是可选的）
   source.cancel('请不要重复点击')
   

2. 其他还要注意get的cancelToken放置在第二个参数的对象里面，post的cancelToken放置在第三个参数对象里面。

3. axios.get('/list', {
     cancelToken: source.token
   })
   
   axios.post('/list', {
     name: 'new name'
   }, {
     cancelToken: source.token
   })