axios取消接口请求-前端-E先生的博客

　　Axios官方提供了一个取消接口请求的方法，但是怎么用这个方法官网写的很简略（不知道是不是我没找全的问题），反正官网的axios取消接口请求累的半死没看懂，后来是扒了很多大佬的博客，才自己理解出来的

　　Axios提供了一个CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求的，至于怎么用，看代码吧，我在代码中写了注解

<body>
  <div class="page" id="app">
    <button @click="getMsg" class="get-msg">获取数据button>
    <button @click="cancelGetMsg" class="cancel">取消获取button>
    <ul>
      <li v-for="item in items">{{item.name}}li>
    ul>
  div>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      items: [],
      cancel: null
    },
    methods: {
      getMsg () {
        let CancelToken = axios.CancelToken
        let self = this
        axios.get('http://jsonplaceholder.typicode.com/comments', {
          cancelToken: new CancelToken(function executor(c) {
            self.cancel = c
            console.log(c)
            // 这个参数 c 就是CancelToken构造函数里面自带的取消请求的函数，这里把该函数当参数用
          })
        }).then(res => {
          this.items = res.data
        }).catch(err => {
          console.log(err)
        })


        //手速够快就不用写这个定时器了，点击取消获取就可以看到效果了
        setTimeout(function () {
          //只要我们去调用了这个cancel()方法，没有完成请求的接口便会停止请求
          self.cancel()
        }, 100)
      },
      //cancelGetMsg 方法跟上面的setTimeout函数是一样的效果，因为手速不够快，哦不，是因为网速太快，导致我来不及点取消获取按钮，数据就获取成功了
      cancelGetMsg () {
        // 在这里去判断你的id 1 2 3，你默认是展示的tab1，点击的时候不管你上一个请求有没有执行完都去调用这个cancel()，
        this.cancel()
      }
    }
  })
  script>
body>