How to cancel an http request in AngularJS

Question

Given a Ajax request in AngularJS   http get   backend    success callback     what is the most effective way to cancel that request if another request is launched  same backend  different parameters for instance

User · Answer

here is a version that handles multiple requests, also checks for cancelled status in callback to suppress errors in error block. (in Typescript)

controller level:

    requests = new Map<string, ng.IDeferred<{}>>();

in my http get:

    getSomething(): void {
        let url = '/api/someaction';
        this.cancel(url); // cancel if this url is in progress

        var req = this.$q.defer();
        this.requests.set(url, req);
        let config: ng.IRequestShortcutConfig = {
            params: { id: someId}
            , timeout: req.promise   // <--- promise to trigger cancellation
        };

        this.$http.post(url, this.getPayload(), config).then(
            promiseValue => this.updateEditor(promiseValue.data as IEditor),
            reason => {
                // if legitimate exception, show error in UI
                if (!this.isCancelled(req)) {
                    this.showError(url, reason)
                }
            },
        ).finally(() => { });
    }

helper methods

    cancel(url: string) {
        this.requests.forEach((req,key) => {
            if (key == url)
                req.resolve('cancelled');
        });
        this.requests.delete(url);
    }

    isCancelled(req: ng.IDeferred<{}>) {
        var p = req.promise as any; // as any because typings are missing $$state
        return p.$$state && p.$$state.value == 'cancelled';
    }

now looking at the network tab, i see that it works beatuifully. i called the method 4 times and only the last one went through.

User · Answer

This feature was added to the 1 1 5 release via a timeout parameter   var canceler    q defer     http get   someUrl    timeout  canceler promise   success successCallback      later    canceler resolve        Aborts the  http request if it isn t finished

User · Answer

This enhances the accepted answer by decorating the  http service with an abort method as follows       use strict   angular module  admin      config    provide   function   provide      provide decorator   http      delegate     q   function   delegate   q      var getFn    delegate get    var cancelerMap          function getCancelerKey method  url        var formattedMethod   method toLowerCase        var formattedUrl   encodeURI url  toLowerCase   split      0       return formattedMethod         formattedUrl          delegate get   function          var cancelerKey  canceler  method      var args      slice call arguments       var url   args 0       var config   args 1             if  config timeout    null          method    GET         cancelerKey   getCancelerKey method  url         canceler    q defer          cancelerMap cancelerKey    canceler        config timeout   canceler promise        args 1    config            return getFn apply null  args            delegate abort   function  request        console log  aborting        var cancelerKey  canceler      cancelerKey   getCancelerKey request method  request url       canceler   cancelerMap cancelerKey        if  canceler    null          console log  aborting   cancelerKey          if  request timeout    null  amp  amp  typeof request timeout      number              canceler resolve            delete cancelerMap cancelerKey                         return  delegate                WHAT IS THIS CODE DOING   To cancel a request a  promise  timeout must be set  If no timeout is set on the HTTP request then the code adds a  promise  timeout   If a timeout is set already then nothing is changed    However  to resolve the promise we need a handle on the  deferred   We thus use a map so we can retrieve the  deferred  later  When we call the abort method  the  deferred  is retrieved from the map and then we call the resolve method to cancel the http request   Hope this helps someone   LIMITATIONS  Currently this only works for  http get but you can add code for  http post and so on  HOW TO USE      You can then use it  for example  on state change  as follows      rootScope  on   stateChangeStart   function  event  toState  toParams      angular forEach  http pendingRequests  function  request             http abort request

User · Answer

Cancelation of requests issued with  http is not supported with the current version of AngularJS  There is a pull request opened to add this capability but this PR wasn t reviewed yet so it is not clear if its going to make it into AngularJS core

User · Answer

You can add a custom function to the  http service using a  decorator  that would add the abort   function to your promises   Here s some working code   app config function  provide         provide decorator   http   function  logDecorator  delegate   q             delegate with abort   function options                let abort defer    q defer                let new options   angular copy options               new options timeout   abort defer promise              let do throw error   false               let http promise    delegate new options  then                  response   gt  response                   error   gt                        if do throw error  return  q reject error                       return  q      gt  null      prevent promise chain propagation                                  let real then   http promise then              let then function   function                       return mod promise real then apply this  arguments                                 function mod promise promise                    promise then   then function                  promise abort    do throw error param   false    gt                        do throw error   do throw error param                      abort defer resolve                                       return promise                             return mod promise http promise                      return  delegate                This code uses angularjs s decorator functionality to add a with abort   function to the  http service   with abort   uses  http timeout option that allows you to abort an http request   The returned promise is modified to include an abort   function  It also has code to make sure that the abort   works even if you chain promises   Here is an example of how you would use it      your original code  http   method   GET   url    names     then names   gt        do something names            new code with ability to abort var promise    http with abort   method   GET   url    names     then      function names            do something names             promise abort       if you want to abort   By default when you call abort   the request gets canceled and none of the promise handlers run   If you want your error handlers to be called pass true to abort true    In your error handler you can check if the  error  was due to an  abort  by checking the xhrStatus property  Here s an example   var promise    http with abort   method   GET   url    names     then      function names            do something names                function error            if  er xhrStatus      abort   return

User · Answer

Cancelling Angular  http Ajax with the timeout property doesn t work in Angular 1 3 15   For those that cannot wait for this to be fixed I m sharing a jQuery Ajax solution wrapped in Angular   The solution involves two services    HttpService  a wrapper around the jQuery Ajax function   PendingRequestsService  tracks the pending open Ajax requests    Here goes the PendingRequestsService service        function  angular         use strict       var app   angular module  app        app service  PendingRequestsService      log   function   log                        var  this   this          var pending                this add   function  request                pending push request                       this remove   function  request                pending     filter pending  function  p                    return p url     request                                      this cancelAll   function                  angular forEach pending  function  p                    p xhr abort                    p deferred reject                                pending length   0                        window angular     The HttpService service         function  angular             use strict           var app   angular module  app            app service  HttpService      http     q     log    PendingRequestsService   function   http   q   log  pendingRequests                this post   function  url  params                    var deferred    q defer                    var xhr     ASI callMethod                       url  url                      data  params                      error  function                              log log  ajax error                                                              pendingRequests add                       url  url                      xhr  xhr                      deferred  deferred                                                 xhr done function  data  textStatus  jqXhr                                                                deferred resolve data                                               fail function  jqXhr  textStatus  errorThrown                            deferred reject errorThrown                          always function  dataOrjqXhr  textStatus  jqXhrErrorThrown                              Once a request has failed or succeeded  remove it from the pending list                         pendingRequests remove url                                           return deferred promise                                    window angular     Later in your service when you are loading data you would use the HttpService instead of  http    function  angular         angular module  app   service  dataService     HttpService   function  httpService             this getResources   function  params                 return httpService post   serverMethod     param  params                              window angular     Later in your code you would like to load the data    function  angular     var app   angular module  app     app controller  YourController     DataService    PendingRequestsService   function  httpService  pendingRequestsService         dataService      getResources params       then function  data               do stuff                                  later that day cancel requests         pendingRequestsService cancelAll             window angular

User · Answer

If you want to cancel pending requests on stateChangeStart with ui-router  you can use something like this      in service                  var deferred    q defer                    var scope   this                   http get URL   timeout   deferred promise  cancel   deferred   success function data                         do something                     deferred resolve dataUsage                      error function                        deferred reject                                        return deferred promise       in UIrouter config   rootScope  on   stateChangeStart   function  event  toState  toParams  fromState  fromParams          To cancel pending request when change state        angular forEach  http pendingRequests  function request              if  request cancel  amp  amp  request timeout                 request cancel resolve

User · Answer

For some reason config timeout doesn t work for me  I used this approach    x000D   x000D  let cancelRequest    q defer    x000D  let cancelPromise   cancelRequest promise  x000D   x000D  let httpPromise    http get       x000D   x000D   q race   cancelPromise  httpPromise    x000D       then function  result    x000D      x000D      x000D   x000D   x000D    And cancelRequest resolve   to cancel  Actually it doesn t not cancel a request but you don t get unnecessary response at least   Hope this helps

[angularjs] How to cancel an $http request in AngularJS?

Examples related to angularjs

Examples related to promise

Examples related to angular-promise

Examples related to angular-http

Examples related to cancellation