javascript - 一旦路由更改，取消所有先前组件的 http 请求

Question

我正在使用 Vue2 和 vue-resource，其中我使用拦截器来显示预加载器。如果有任何 Unresolved 请求，加载程序就会出现。以下是代码:

<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 请求。

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

无论如何都找不到实现这一目标的方法。看起来有可能，因为棱 Angular 分明的人已经以某种方式做到了 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>

这是路由改变之前的例子。你可以看看。

谢谢。