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

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

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 lt string  ng IDeferred lt    gt  gt       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       lt --- promise to trigger cancellation                     this  http post url  this getPayload    config  then              promiseValue   gt  this updateEditor promiseValue data as IEditor               reason   gt                       if legitimate exception  show error in UI                 if   this isCancelled req                         this showError url  reason                                             finally      gt                helper methods      cancel url  string            this requests forEach  req key    gt                if  key    url                  req resolve  cancelled                        this requests delete url              isCancelled req  ng IDeferred lt    gt             var p   req promise as any     as any because typings are missing   state         return p   state  amp  amp  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

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

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

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

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

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

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

[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