Wie kann ich eine $ http Anfrage in AngularJS abbrechen?

Cancelling-Eckig $http Ajax mit der timeout-Eigenschaft funktioniert nicht in Eckige 1.3.15.
Für diejenigen, die nicht warten können, bis dies behoben wird bin ich teilen ein jQuery-Ajax-Lösung verpackt in Eckig.

Die Lösung umfasst zwei Dienste:

• HttpService (einem wrapper um die jQuery Ajax-Funktion);
• PendingRequestsService (tracks der ausstehenden/offenen Ajax-Anfragen)

Hier geht der 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);

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

Später in Ihrem Dienst, wenn Sie Daten laden möchten, verwenden Sie die HttpService-statt $http:

(function (angular) {

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

        this.getResources = function (params) {

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

        };
    }]);

})(window.angular);

Später in Ihrem code, den Sie möchten, um die Daten zu laden:

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

InformationsquelleAutor der Antwort Edward Olamisan

Wenn Sie Abbrechen möchten anhängigen Anträge auf stateChangeStart mit ui-router, die Sie verwenden können, so etwas wie dieses:

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

InformationsquelleAutor der Antwort SonTL

hier ist eine version, die verarbeitet mehrere Anfragen, prüft auch, ob storniert-status-callback zu unterdrücken, um Fehler in Fehler-block. (Typoskript)

controller-Ebene:

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

in meinem 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-Methoden

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

schauen jetzt auf die Registerkarte "Netzwerk", ich sehe, dass es funktioniert beatuifully. ich nannte die Methode, die 4 mal und nur das Letzte ging durch.

InformationsquelleAutor der Antwort Sonic Soul