Java
MySQL
Python
大数据
前端
黑科技
    首页 > 互联网 > 前端 > axios取消接口请求

axios取消接口请求

[导读]:Axios官方提供了一个取消接口请求的方法,但是怎么用这个方法官网写的很简略(不知道是不是我没找全的问题),反正官网的axios取消接口请求累的半死没看懂,后来是扒了很多大佬的博客,...
  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>

本文来自投稿,不代表阿习进阶博客立场,如若转载,请注明出处:https://www.yanxias.com/qianduan/159.html

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
点击这里给我发消息