Cómo cancelar una solicitud http http en AngularJS?

Cancelar Angular http http Ajax con la propiedad timeout no funciona en Angular 1.3.15. Para aquellos que no pueden esperar a que esto se solucione, estoy compartiendo una solución Ajax de jQuery envuelta en Angular.

La solución implica dos servicios:

• HTTPService (una envoltura alrededor de la función Ajax de jQuery);
• PendingRequestsService (rastrea las solicitudes Ajax pendientes/abiertas)

Aquí va el servicio PendingRequestsService:

    (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);

El HTTPService servicio:

     (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);

Más tarde en su servicio cuando esté cargando datos, usaría el HTTPService en lugar de http http:

(function (angular) {

    angular.module('app').service('dataService', ["HttpService", function (httpService) {

        this.getResources = function (params) {

            return httpService.post('/serverMethod', { param: params });

        };
    }]);

})(window.angular);

Más adelante en su código le gustaría cargar los datos:

(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);

La cancelación de solicitudes emitidas con $http no es compatible con la versión actual de AngularJS. Hay una pull request abierta para agregar esta capacidad, pero este PR no se revisó todavía, por lo que no está claro si va a convertirlo en el núcleo AngularJS.

Si desea cancelar las solicitudes pendientes en stateChangeStart con ui-router, puede usar algo como esto:

/ / en servicio

                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;

/ / en 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 && request.timeout) {
             request.cancel.resolve();
          }
       });
    });

Por alguna razón config.el tiempo fuera no funciona para mí. Usé este enfoque:

let cancelRequest = $q.defer();
let cancelPromise = cancelRequest.promise;

let httpPromise = $http.get(...);

$q.race({ cancelPromise, httpPromise })
    .then(function (result) {
...
});

Y cancelRequest.resolver() para cancelar. En realidad, no no cancela una solicitud, pero al menos no recibe una respuesta innecesaria.

Espero que esto ayude.

Esto mejora la respuesta aceptada decorando el servicio http http con un método abort de la siguiente manera ...

'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;
}]);
  }]);

¿QUÉ ESTÁ HACIENDO ESTE CÓDIGO?

Para cancelar una solicitud se debe establecer un tiempo de espera de "promesa". Si no se establece ningún tiempo de espera en la solicitud HTTP, el código agrega un tiempo de espera "promise". (Si ya se ha establecido un tiempo de espera, entonces no se cambia nada).

Sin embargo, para resolver la promesa necesitamos un control sobre el "diferido". Por lo tanto, utilizamos un mapa para que podamos recuperar el "diferido" más tarde. Cuando llame al método abortar, el" diferido " se recupera del mapa y luego llamamos al método resolve para cancelar la solicitud http.

Espero que esto ayude a alguien.

LIMITACIONES

Actualmente esto solo funciona para http http.get pero puedes añadir código para http http.post y así sucesivamente

CÓMO USAR ...

Luego puede usarlo, por ejemplo, en el cambio de estado, de la siguiente manera ...

rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
  angular.forEach($http.pendingRequests, function (request) {
        $http.abort(request);
    });
  });

Aquí hay una versión que maneja múltiples solicitudes, también comprueba el estado cancelado en la devolución de llamada para suprimir errores en el bloque de errores. (in Typescript)

Nivel de controlador:

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

En mi 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(() => { });
    }

Métodos auxiliares

    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';
    }

Ahora mirando la pestaña de red, veo que funciona beatuifully. llamé al método 4 veces y solo el último pasó.

Puede agregar una función personalizada al servicio $http usando un "decorador" que agregaría la función abort() a sus promesas.

Aquí hay un código de trabajo:

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 => response, 
                error => {
                    if(do_throw_error) return $q.reject(error);
                    return $q(() => 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) => {
                    do_throw_error = do_throw_error_param;
                    abort_defer.resolve();
                };
                return promise;
            }

            return mod_promise(http_promise);
        }

        return $delegate;
    });
});

Este código utiliza la funcionalidad decorador de angularjs para agregar una función with_abort() al servicio $http.

with_abort() utiliza la opción $http timeout que le permite abortar una solicitud http.

La promesa devuelta se modifica para incluir una función abort(). También tiene código para asegurarse de que el abort() funciona incluso si encadenas promesas.

Aquí hay un ejemplo de cómo lo usarías:

// your original code
$http({ method: 'GET', url: '/names' }).then(names => {
    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

Por defecto cuando llamas a abort() la solicitud se cancela y ninguno de los manejadores de promesas se ejecuta.

Si desea que sus controladores de errores sean llamados, pase true a abort(true).

En su controlador de errores puede comprobar si el "error" se debió a un "abortar" comprobando la propiedad xhrStatus. He aquí un ejemplo:

var promise = $http.with_abort({ method: 'GET', url: '/names' }).then(
    function(names) {
        do_something(names));
    }, 
    function(error) {
        if (er.xhrStatus === "abort") return;
    });