如何取消（阻止）ajax 请求

取消 ajax 请求有三种方法：

• 原生 XHR
• jquery
• axios

原生 XHR

对于原生 XHR 对象来说，取消的 ajax 的关键是调用 XHR 对象的.abort()方法

var native = new XMLHttpRequest()
native.open('GET', 'https://api.github.com/')
native.send()
native.onreadystatechange = function () {
  if (native.readyState == 4 && native.status == 200) {
    console.log(native.response)
  } else {
    console.log(native.status)
  }
}
native.abort()

jquery

在 jQuery 中，取消 ajax 请求也是通过调用.abort()方法，只不过操作的对象不再是原生 XHR 对象，取消 ajax 之后，jQuery 封装的 ajax 对象就会执行 error 对应的函数

var jp = $.ajax({
  type: 'get',
  url: 'https://api.github.com/',
  dataType: 'json',
  success: function (data) {
    console.log(data)
  },
  error: function (err) {
    console.log(err)
  }
})
jp.abort()

axios

在 axios 中取消 ajax 请求不同于上面两种形式，在 axios 中是通过axios.CancelToken.source()方法取消请求

var CancelToken = axios.CancelToken
var source = CancelToken.source()

axios({
  method: 'GET',
  url: 'https://api.github.com/',
  cancelToken: source.token
  //cancelToken的值起标识作用，标识由source控制的、将要被取消的ajax操作
})
  .then(res => {
    console.log(res.data)
  })
  .catch(err => {
    console.log(err)
  })

source.cancel('Operation canceled by the user.')

多个 axios

var CancelToken = axios.CancelToken

var source = CancelToken.source()
axios({
  method: 'GET',
  url: 'https://api.github.com/',
  cancelToken: source.token
})
  .then(res => {
    console.log(res.data)
  })
  .catch(err => {
    console.log(err)
  })

var custom = CancelToken.source()
axios({
  method: 'GET',
  url: 'https://api.github.com/',
  cancelToken: custom.token
})
  .then(res => {
    console.log(res.data)
  })
  .catch(err => {
    console.log(err)
  })

参考文章： https://blog.csdn.net/wopelo/article/details/79802585 > https://www.jianshu.com/p/a542acc1bd9e