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

Posted 2023-02-22

【中文标题】路由改变后取消前一个组件的所有http请求

【英文标题】：Cancel all http requests of previous component once the route is changed

【发布时间】：2017-10-25 16:09:59

【问题描述】：

我正在使用 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

我也不知道怎么用这里的 abort 方法：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort

【问题讨论】：

你试过了吗，例子中提供了什么？如果是这样，请提供您的示例代码。

先生举个例子？

这个答案提供了***.com/questions/23244389/…

请阅读。它是一个角度特定的解决方案。我不知道角度。在内部，它可能正在使用 abort 方法。我正在寻找 vue-resource 中的解决方案。

你用什么来发出http请求？

【参考方案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>

这是路由更改前的about示例。你可以看看。

谢谢。

【讨论】：

谢谢@MehulJoshi。但是在每个组件中编写相同的逻辑将是很多冗余代码。我将尝试在全局级别的拦截器中使用您的逻辑并返回。

这只是一个示例。

请注意，在较新版本的vue-resource 中，beforeSend 被称为send