New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Request: cancel request #38

Closed
rleger opened this Issue Aug 28, 2015 · 7 comments

Comments

Projects
None yet
4 participants
@rleger
Copy link

rleger commented Aug 28, 2015

It would be nice to be able to cancel an request.

for instance when a user is browsing pages, if he/she clicks to quickly to the next one multiple times the app will keep firing requests. I'd like to be able to only keep the latest active.

Thanks !

@steffans

This comment has been minimized.

Copy link
Member

steffans commented Aug 28, 2015

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
}});
@rleger

This comment has been minimized.

Copy link
Author

rleger commented Aug 28, 2015

Great, I'll give it a try, thanks

@rleger

This comment has been minimized.

Copy link
Author

rleger commented Aug 28, 2015

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

@rleger

This comment has been minimized.

Copy link
Author

rleger commented Aug 31, 2015

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);
}
...
@amirrustam

This comment has been minimized.

Copy link

amirrustam commented Jan 14, 2016

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

@rleger

This comment has been minimized.

Copy link
Author

rleger commented Jan 14, 2016

There you go, sorry.

@rleger rleger closed this Jan 14, 2016

@iagafonov

This comment has been minimized.

Copy link

iagafonov commented Apr 3, 2017

beforeSend is renamed to before, as I found out

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment