Cancel all http requests of previous component once the route is changed

Question

I am using Vue2 and vue-resource in which I am using an interceptor to show the pre-loader. If there are any requests which are not resolved the loader shows up. Following is the code:

<template>
  <div class="valign-wrapper" id="preloader" v-if="showLoader">
  <div class="preloader-wrapper big active">
    <div class="spinner-layer spinner-blue-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div>
      <div class="gap-patch">
        <div class="circle"></div>
      </div>
      <div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data: function () {
    return {
      totalRequests: []
    }
  },
  mounted: function () {
    var self = this
    Vue.http.interceptors.push(function (request, next) {
      self.totalRequests.push(request)
      next(function (response) {
        self.totalRequests.pop()
      })
    })
  },
  computed: {
    showLoader: function () {
      if (this.totalRequests.length === 0) {
        return false
      }
      return true
    }
  }
}
</script>

Now I have some pages where a lot of http requests are being made when the respective components are mounted.

What I am looking for is that when the route is changed the pending request should get aborted or cancelled.

Couldn't find anyway to achieve this. Looks possible because angular guys have done it in some way AngularJS abort all pending $http requests on route change

Also I don't know how to use the abort method over here: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort

did you tried, what has been provided in example? if so please provide fiddle of your example code. — MehulJoshi, May 25 '17 at 05:54
which is provided on this answer https://stackoverflow.com/questions/23244389/angularjs-abort-all-pending-http-requests-on-route-change — MehulJoshi, May 25 '17 at 05:59
Please read it. Its an ANGULAR specific solution. I don't know angular. Internally it might be using the abort method. I am looking for a solution in vue-resource. — Deepak, May 25 '17 at 06:08

score 3 · Answer 1 · answered May 25 '17 at 06:52

new Vue({
  el: '#vueApp',
  data: {
    debug: true,
    users: [],
    xhr_request:[]
  },
  beforeDestroy:function() {
    for (var i = 0; i < this.xhr_request.length; i++) {
      this.xhr_request.shift().abort();
   }
  },
  methods: {
    loadUsers: function() {
      this
        .$http
        .get('https://jsonplaceholder.typicode.com/users', 
             function(data, status, request){
              if(status == 200){
                this.users = data;
              }
         },
          { beforeSend: function(xhr) {
             this.xhr_request.push(xhr);
          }});
          console.log(this.$http());
    }
  }
});

#vueApp{ padding-top: 20px; }

<div id="vueApp">
  <div class="container">
    
    <div class="row">
      <div class="col-sm-12">
        <a href="#"
           class="btn btn-success"
           @click.stop="loadUsers">Load Users</a>
      </div>
    </div> <!-- /row -->
    
    <div class="row">
      <div class="col-sm-12">
        
        <h3>
          User List
        </h3>
        <ul>
          <li v-for="user in users">
            {{ user.name }} - {{ user.email }}
          </li>
        </ul>  
        
      </div>
    </div> <!-- row -->
    
    <div class="row" v-if="debug">
      <div class="col-sm-12">
        <h3>
          Vuejs Debug Data
        </h3>
        <pre>{{ $data | json }}</pre>
      </div>
    </div> <!-- /row -->
  </div>
</div>

This is the example of the about before route change. you can take a look at.

thanks.

Thanks @MehulJoshi. But writing the same logic inside every component will be alot of redundant code. I will try using your logic inside the interceptor on the global level and get back. — Deepak, May 25 '17 at 07:36
Note that in newer versions of `vue-resource`, `beforeSend` is called `send` — Bassie, Feb 26 '20 at 16:59

Cancel all http requests of previous component once the route is changed

1 Answers1