루트가 변경되면 이전 컴포넌트의 모든 http 요청을 취소합니다.

루트가 변경되면 이전 컴포넌트의 모든 http 요청을 취소합니다.

프리 로더를 표시하기 위해 가로채기를 사용하는 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 요청이 발생하는 페이지가 있습니다.

루트가 변경되면 보류 중인 요청이 중단되거나 취소됩니다.

어쨌든 이 목표를 달성할 수 있는 방법을 찾을 수 없었습니다.각진 남자들이 어떤 식으로든 해냈기 때문에 가능한 것 같아 각진.JS는 루트 변경 시 보류 중인 $http 요청을 모두 중단합니다.

또한 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort에서 중단 방법을 사용할 수 없습니다.

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>

루트 변경 전 의 예를 다음에 나타냅니다.한 번 보세요.

고마워요.

언급URL : https://stackoverflow.com/questions/44173214/cancel-all-http-requests-of-previous-component-once-the-route-is-changed