Request: cancel request about vue-resource HOT 7 CLOSED

You could use the beforeSend callback to access the request object and a add your code to abort the current request.

this.$http.post('url', function (data) {}, {beforeSend: function(xhr) {
    // use XMLHttpRequest and add xhr.abort callback
}});

from vue-resource.

Great, I'll give it a try, thanks

from vue-resource.

Ok, so I'm trying to push the current request to an array of requests. That way, before firing a new one, I can iterate through all the requests and abort them.

I initialized xhr_request to an empty array on the vue instance.

this.$http.get('http://whatever.com', function (data, status, request) {
   // !! data is empty if I this.xhr_request.push(xhr) on the beforeSend callback
}, { beforeSend: function(xhr) {
   for (var i = 0; i < this.xhr_request.length; i++) {
      this.xhr_request.shift().abort();
   }
   this.xhr_request.push(xhr);
}});

BUT, when I push the current xhr to the xhr_request array, the returned data object from the request is empty. Chrome inspector shows the expected response from the API. I've tested some scenarios, its definitely pushing xhr to an array that causes the issue.

Is there something I'm missing ??

Thanks!!

from vue-resource.

After a bit more debugging :
setting my xhr_requests object globally an not on the vue instance does the trick. I don't fully understand why but it's good enough for now

var xhr_requests = [];

new Vue({
...

beforeSend: function(xhr) {
    // Abort old unfinished requests
    for (var i = 0; i < xhr_requests.length; i++) {
        xhr_requests.shift().abort();
    }

    // Add current request to the queue
    xhr_requests.push(xhr);
}
...

from vue-resource.

@rleger if you feel like you have a sufficient solution and don't have anything else to add then it's best to close out this issue. Thanks.

from vue-resource.

There you go, sorry.

from vue-resource.

beforeSend is renamed to before, as I found out

from vue-resource.