Feature: Cancel $http request

[coli]

Use case is we started a new $http request, and therefore needs to cancel 1 or more previous $http requests.

Eg:

var previousPromises = [];
previousPromises.push($http().then(function(){}));
...

Then:
//previousPromises[0].cancel()
or
//previousPromises[0].reject()

Reference
https://groups.google.com/forum/?fromgroups#!searchin/angular/cancel$20http/angular/aT-MowZoPJg/kPEr5Ja0GEwJ

[coli]

A slightly related feature is ability to cancel a promise, or if the promise has a reference to the defer, then we can do promise.defered.reject();

[markwaddle]

i need this feature as well.

i have an interface where a user can quickly trigger many actions that in turn trigger $http requests. in the case that a request is triggered and one is currently waiting for a response, i would like to be able to cancel it before requesting the new one.

[koistya]

Me too, need that feature.

[markwaddle]

An alternative to enabling request cancellation would be to allow the client to optionally pass in a key for the request and $http would ensure that only one request per key is pending at any point in time. The latest request with a specific key would always trump prior requests with that key. $http would need to cancel any pending requests with the same key before sending the new request. If the key was falsy it would send the request without consideration for pending requests. In other words, any number of requests with falsy keys could be pending simultaneously. The promises for the cancelled requests could be rejected.

This solution would suit my use case very well, and I suspect others' use cases too, and it might also be simpler to implement because you would not need to change the promise interface.

[samunplugged]

+1 for this feature.

[jbeard4]

+1 from me as well

[gregwebs]

+1

[jinder]

+1

[marknadig]

+1

[sssilver]

+1

[rickkln]

+1

[gonzaloruizdevilla]

@dbinit I think you should reject the promise when the abort method is called. The function that will handle the rejection can use the status parameter to find out if it was an abort request or different kind of error and then act consequently.

[nicolacity]

Need this feature! +1

[amirnissim]

+1

[johnoscott]

+1

[georgiosd]

+1

[fredrikbonander]

+1

[rickkln]

dbinit's solution worked perfectly for me.

[ryankshaw]

+1, @dbinit this new fix looks really nice!

[ryankshaw]

another thing that i need is to be able to bind to the progress event of the xhr upload.

for example (in plain javascript):

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false)

I want to be able to do the same thing by doing $http.post...

so maybe rather than just adding an abort method, it would be good to provide something that lets me just get at the original xhr object.

[markwaddle]

@ryankshaw that sounds like a separate request deserving of its own issue

• Mark

On Wed, Jan 30, 2013 at 4:07 PM, Ryan Shaw [email protected] wrote:

another thing that i need is to be able to bind to the progress event of
the xhr upload.

for example (in plain javascript):

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false)

I want to be able to do the same thing by doing $http.post...

so maybe rather than just adding an abort method, it would be good to
provide something that lets me just get at the original xhr object.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1159#issuecomment-12920190.

[ryankshaw]

@markwaddle, I just filed it as a separate issue in #1934

[jorlow]

+1

[mping]

+1

[ybogdanov]

+1

[fxck]

Any reason this shouldn't work? Because it doesn't fire the request at all..

        el.bind('keyup', function() {

            var canceler = $q.defer();

            $http.post('/api', data, {timeout: canceler.promise}).success(function(returnData) {
            });
            canceler.resolve();
        });

[dbinit]

You need to wrap your code with scope.$apply. Bind doesn't do it implicitly.

[fxck]

$q needs it? Becuase $http doesn't.. anyway it' still not firing the request no matter if I put it inside scope.$apply(function(){}); or just put scope.$apply() after it..

[dbinit]

Hmm, I think the $http.post doesn't fire the request until the next digest cycle. So the canceler.resolve is canceling it before it happens.

Try putting a scope.$apply between the $http.post and canceler.resolve.

[gonzaloruizdevilla]

It seems to me like it is working.
You resolve the canceler promise immediately just after creating the request. You don't give any time to the request.

[knalli]

Ehm, that's AngularJS. Every external event call must invoke the scope digester.

$http will create the request with the next scope cycle.. the example above have not one.

[fxck]

@dbinit that works, thanks!

[elemoine]

See #2442 for the issue reporting on $http requiring to be called within a $watch. That really sounds like a bug to me, as one should be able to call $http from any context.

[e-oz]

great thing. thank you very much!

[markstickley]

Seems like I'm about 4 months too late but doesn't the approach of hijacking the timeout parameter means that you can't have both a fixed timeout AND the option to manually cancel (due to the request being made obsolete) without rolling your own timeout functionality? That seems rather limited. Do we know if separating this joint functionality into discrete parts is on the roadmap at all?

[coli]

@markstickley It's just a promise you control, it has nothing to do with timeout

[dbinit]

@markstickley You can just use the promise returned by $timeout and then do $timeout.cancel(promise) if you want to cancel the request early.

[markstickley]

@dbinit That's a decent workaround, thanks I'll try that :)

[btford]

I wrote a service demonstrating how one might encapsulate this functionality here: http://plnkr.co/edit/P8wKns51GVqw5mwS5l5R?p=preview

I thought it might be useful for anyone that comes across this thread in the future.

[derekrprice]

btford's plunker isn't completely working for me. The cancelQuery = null in $http.post().success() backfires. success() gets called asynchronously for cancelled requests, so with a query launched on keypress, if I type quickly some of the cancelQuery info is lost, meaning only some requests are cancelled. If I just remove the cancelQuery = null line, everything works fine.

[phantomwhale]

I ended up bringing in a boolean flag, so that I could differentiate between a "normal" error, and a manually cancelled error. The need to do this does seem to highlight this is indeed a "workaround" and perhaps could do with some better direct support at a later stage.

I modified @btford 's plunk to demonstrate this: http://plnkr.co/edit/BW6Zwu?p=preview

[fxck]

has this stopped working for anyone in 1.2.1?

[anton000]

instead of relying on timeout, ended up wrapping $http in another deferred, then rejected that deferred when a new call was made or when i needed to "cancel". this had the result of still completing the $http call, but rejecting the data returned.

thoughts?

$scope.fetchData = function() {
  if ($scope.async) {
    $scope.async.reject();
  }
  $scope.async = testAsync();
  $scope.async.promise.then(
    function(data){
    console.log('success' + data);
    },
    function(data) {
      console.log('reject' + data);
    }
  );
}

testAsync = function() {
  var deferred = $q.defer();
  $http.get('/api/')
    .success(function(data) {
      deferred.resolve(data);
    })
    .error(function(data) {
      deferred.reject(data);
    });
  return deferred;
};

[snjoetw]

@anton000 your code only rejects the wrapper promise. it doesn't actually cancel original $http promise

[anton000]

@snjoetw i explained in my post it still completes the original $http promise but rejects the data returned. I think using this matches the concept of promise to resolver communication being unidirectional as @IgorMinar explained in #2452 .

[MaestroJurko]

I cannot get it to cancel my request.

used this approach:
http://www.bennadel.com/blog/2624-aborting-an-ajax-request-in-angularjs-using-httpi.htm?&_=0.5996839550789446#comments_45274

and this:
http://developer.rackspace.com/blog/cancelling-ajax-requests-in-angularjs-applications.html

What is going on, I really need this.

[anton000]

@mato75 This would be better asked on the blog itself which you got the snippet from, or over on sites like http://www.stackoverflow.com

[BiosSun]

+1

[codeniac]

How is going this feature? I need it a lot!!! 👍

[e-oz]

@codeniac read here https://docs.angularjs.org/api/ng/service/$http#usage about timeout argument.

[ghost]

couldn't you use config.timeout = $q.when('canceled') to cancel an $http request before it's actually sent?