一旦路由改变，取消前一个组件的所有http请求

Question

我正在使用Vue2和vue-resource，其中我使用拦截器来显示预加载器。如果有任何未解决的请求，加载器将显示出来。以下是代码：

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

现在我已经在那里当相应元件被安装正在作出了很多的HTTP请求的某些页面。

我在找的是当路由改变时，挂起的请求应该被中止或取消。

无论如何找不到这个。看起来可能的，因为角度的家伙已​​在某些方面做了AngularJS abort all pending $http requests on route change

此外，我不知道如何使用中止方法在这里：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort

Answer 1

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>

这是例子大约在路线变化之前。你可以看看。

谢谢。