axios------CancelToken

目的：取消请求（不管请求已经走到哪个阶段）

如图一个tab页面，内容共用同一套dom，即共用同一个渲染数组，点击aaa发送请求，在请求还没返回时，点击bbb，可能会出现aaa的数据跟bbb的数据同时渲染到bbb的内容中。

所以，现在我得到的数据多于我要的 > 多出来的数据是因为上一个tab页请求延迟造成的 > 那我就在当前页请求数据的时候掐断上一个页面还没完成的请求就好了

代码如下

<template>
  <div>
    <button @click="sendData">发送ajax</button>
    <button @click="cancelData">取消ajax</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cancel: null
    }
  },
  methods: {
    sendData() {
      let CancelToken = this.$axios.CancelToken
      let self = this
      this.$axios
        .get('http://jsonplaceholder.typicode.com/comments', {
          cancelToken: new CancelToken(function executor(fn) {
            self.cancel = fn
          })
        })
        .then(res => {})
        .catch(err => {})
    },
    cancelData() {
      this.cancel()
    }
  }}
</script>复制代码

效果：

点击发送ajax按钮，接口获取成功，并返回200

当点击发送ajax，在数据没返回之前点击取消ajax，请求立刻取消，status为(canceled)