美文网首页
axios如何取消接口请求

axios如何取消接口请求

作者: 前端阿峰 | 来源:发表于2021-04-06 21:46 被阅读0次

    vue项目,如何在axios中取消已经发送的请求呢?

    1. 原生js的abort()这个方法
    <div class="page" id="app">
        <button  class="getData">获取数据</button>
        <button  class="cancel">取消获取</button>
      </div>
    <script>
      var currentAjax = null
        $('.getData').click(function () {
          currentAjax = $.ajax({
            type: 'GET',
            url: 'http://jsonplaceholder.typicode.com/comments',
            success: function (res) {
              console.log(res)
            },
            error: function (err) {
              console.log("获取失败")
            }
          })
        })
        $('.cancel').click(function () {
          if (currentAjax) {
            currentAjax.abort()
          }
        })
      </script>
    
    
    1. 在axios中取消接口请求操作

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

    <body>
      <div class="page" id="app">
        <button @click="getData" class="getData">获取数据</button>
        <button @click="cancelGetData" class="cancel">取消获取</button>
      </div>
      <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!',
          items: [],
          cancel: null
        },
        methods: {
          getData () {
            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)
          },
          //cancelGetData 方法跟上面的setTimeout函数是一样的效果,因为手速不够快,哦不,是因为网速太快,导致我来不及点取消获取按钮,数据就获取成功了
          cancelGetData () {
            // 在这里去判断你的id 1 2 3,你默认是展示的tab1,点击的时候不管你上一个请求有没有执行完都去调用这个cancel(),
            this.cancel()
          }
        }
      })
      </script>
    </body>
    
    1. 重复点击问题

    问题:
    开发的时候会遇到一个重复点击的问题,短时间内多次点击同一个按钮发送请求会加重服务器的负担,消耗浏览器的性能,多以绝大多数的时候我们需要做一个取消重复点击的操作

    在vue开发中,这个方法一样完美解决这一问题,通常我们会封装一遍axios,这里我们便可以将此功能封装到拦截器里面去

        import axios from 'axios';
        
        axios.defaults.timeout = 5000;
        axios.defaults.baseURL ='';
    
        let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
        let cancelToken = axios.CancelToken;
        let removePending = (ever) => {
            for(let p in pending){
                if(pending[p].u === ever.url + '&' + ever.method) { //当当前请求在数组中存在时执行函数体
                    pending[p].f(); //执行取消操作
                    pending.splice(p, 1); //把这条记录从数组中移除
                }
            }
        }
        
        //http request 拦截器
        axios.interceptors.request.use(
        config => {
          config.data = JSON.stringify(config.data);
          config.headers = {
            'Content-Type':'application/x-www-form-urlencoded'
          }
    
          removePending(config); //在一个ajax发送前执行一下取消操作
          config.cancelToken = new cancelToken((c)=>{
             // 这里的ajax标识我是用请求地址&请求方式拼接的字符串,当然你可以选择其他的一些方式
             pending.push({ u: config.url + '&' + config.method, f: c });  
          });
          return config;
        },
        error => {
          return Promise.reject(err);
        }
      );
      //http response 拦截器
      axios.interceptors.response.use(
        response => {
    
          removePending(res.config);  //在一个ajax响应后再执行一下取消操作,把已经完成的请求从pending中移除
    
          if(response.data.errCode ==2){
            router.push({
              path:"/login",
              querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
            })
          }
          return response;
        },
        error => {
          return Promise.reject(error)
        }
      )
    

    相关文章

      网友评论

          本文标题:axios如何取消接口请求

          本文链接:https://www.haomeiwen.com/subject/oqcckltx.html