Comment annuler un $requête http dans AngularJS?

Annulation Angulaire $http Ajax avec le délai de propriété ne fonctionne pas dans Angulaire 1.3.15.
Pour ceux qui ne peuvent pas attendre pour être fixé, je suis le partage de jQuery Ajax solution enveloppé dans Angulaire.

La solution comprend deux services:

• HttpService (un wrapper autour de la fonction Ajax de jQuery);
• PendingRequestsService (pistes dans l'attente de l'/ouvrir les requêtes Ajax)

Va ici le 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);

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

Plus tard dans votre service lorsque vous chargez des données, vous utilisez le HttpService au lieu de $http:

(function (angular) {

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

        this.getResources = function (params) {

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

        };
    }]);

})(window.angular);

Plus loin dans votre code que vous souhaitez charger les données:

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

Si vous souhaitez annuler les demandes en attente sur stateChangeStart avec ui-routeur, vous pouvez utiliser quelque chose comme ceci:

//en 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;

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

Ce qui renforce la accepté de répondre par la décoration de la $service http, avec un abandon de la méthode comme suit ...

'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-CE QUE CE CODE FAIT?

Pour annuler une demande, une "promesse" délai d'attente doit être définie.
Si aucun délai d'attente est défini dans la requête HTTP, puis le code ajoute une "promesse" délai d'attente.
(Si le délai d'attente est déjà alors rien n'est changé).

Toutefois, pour résoudre la promesse que nous avons besoin d'une poignée sur le "différé".
Nous avons donc l'utilisation d'une carte afin que nous puissions récupérer le "différé" plus tard.
Lorsque nous appelons la méthode abort, le "différé", est extrait de la carte, puis nous appelons la méthode resolve pour annuler la requête http.

Espère que cela aide quelqu'un.

LIMITATIONS

Actuellement, cela ne fonctionne que pour $http.obtenir, mais vous pouvez ajouter du code pour $http.poste et ainsi de suite

COMMENT UTILISER ...

Vous pouvez ensuite utiliser pour, par exemple, sur changement d'état, comme suit ...

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

Vous pouvez ajouter une fonction personnalisée pour la $http service à l'aide d'un "décorateur" qui permettrait d'ajouter à la abort() fonction de vos promesses.

Voici une partie du code qui fonctionne:

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

Ce code utilise angularjs du décorateur fonctionnalités à ajouter un with_abort() fonction de la $http service.

with_abort() utilise $http délai d'expiration de l'option qui vous permet d'interrompre une requête http.

Le retour de la promesse est modifié pour inclure une abort() fonction. Il dispose également d'un code de s'assurer que le abort() fonctionne même si vous avez de la chaîne de promesses.

Voici un exemple de la façon dont vous l'utiliser:

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

Par défaut lorsque vous appelez abort() la demande sera annulée et aucun de la promesse des gestionnaires d'exécuter.

Si vous voulez que votre erreur maîtres de passe fidèle à abort(true).

Dans votre gestionnaire d'erreur, vous pouvez vérifier si l'erreur était due à un "abandon" en cochant la xhrStatus de la propriété. Voici un exemple:

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