axios取消接口请求

最新推荐文章于 2023-08-31 17:35:12 发布

新生代农民工yy

最新推荐文章于 2023-08-31 17:35:12 发布

阅读量1k

点赞数

分类专栏：温故而知新

温故而知新专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<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>

例如tab切换的时候需要 axios 取消接口请求

新生代农民工yy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
axios取消接口请求

<body> <div class="page" id="app"> <button @click="getMsg" class="get-msg">获取数据</button> <button @click="cancelGetMsg" class="cancel">取消获取</button> &l...
复制链接

扫一扫