Jak anulować żądanie $ http w AngularJS?

Biorąc pod uwagę żądanie Ajax w AngularJS

$http.get("/backend/").success(callback);

jaki jest najskuteczniejszy sposób anulowania tego żądania, jeśli uruchomione zostanie kolejne żądanie (ten sam backend, różne parametry na przykład).

Ta funkcja została dodana do wersji 1.1.5 za pomocą parametru limitu czasu:

var canceler = $q.defer();
$http.get('/someUrl', {timeout: canceler.promise}).success(successCallback);
// later...
canceler.resolve();  // Aborts the $http request if it isn't finished.

Anulowanie Angular $ http Ajax z właściwością timeout nie działa w Angular 1.3.15. Dla tych, którzy nie mogą się doczekać, aby to naprawić, udostępniam rozwiązanie jQuery Ajax opakowane w Angular.

Rozwiązanie obejmuje dwie usługi:

• HttpService (opakowanie wokół funkcji Ajax jQuery);
• PendingRequestsService (śledzi oczekujące / otwarte żądania Ajax)

Oto usługa 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);

Usługa HttpService:

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

Później w usłudze, gdy ładujesz dane, użyjesz HttpService zamiast $ http:

(function (angular) {

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

        this.getResources = function (params) {

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

        };
    }]);

})(window.angular);

Później w kodzie chcesz załadować dane:

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

Anulowanie żądań wydanych za pomocą $httpnie jest obsługiwane w bieżącej wersji AngularJS. Zostało otwarte żądanie ściągnięcia, aby dodać tę możliwość, ale ten PR nie został jeszcze sprawdzony, więc nie jest jasne, czy uda mu się przekształcić w rdzeń AngularJS.

Jeśli chcesz anulować oczekujące żądania na stateChangeStart za pomocą interfejsu użytkownika, możesz użyć czegoś takiego:

// czynny

                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;

// w konfiguracji UIrouter

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

Z jakiegoś powodu config.timeout nie działa dla mnie. Użyłem tego podejścia:

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

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

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

I cancelRequest.resolve (), aby anulować. W rzeczywistości nie anuluje to żądania, ale przynajmniej nie otrzymasz niepotrzebnej odpowiedzi.

Mam nadzieję że to pomoże.

Zwiększa to akceptowaną odpowiedź, dekorując usługę $ http za pomocą metody przerywania w następujący sposób ...

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

CO DZIAŁA TEN KOD?

Aby anulować żądanie, należy ustawić limit czasu „obietnicy”. Jeśli dla żądania HTTP nie ustawiono limitu czasu, kod dodaje limit czasu „obiecania”. (Jeśli limit czasu jest już ustawiony, nic się nie zmienia).

Aby jednak spełnić obietnicę, potrzebujemy poradzić sobie z „odroczonym”. W ten sposób korzystamy z mapy, aby później odzyskać „odroczone”. Kiedy wywołujemy metodę przerwania, „odroczony” jest pobierany z mapy, a następnie wywołujemy metodę resolve, aby anulować żądanie http.

Mam nadzieję, że to komuś pomoże.

OGRANICZENIA

Obecnie działa to tylko dla $ http.get, ale możesz dodać kod dla $ http.post i tak dalej

JAK UŻYWAĆ ...

Następnie możesz go użyć na przykład przy zmianie stanu, w następujący sposób ...

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

tutaj jest wersja, która obsługuje wiele żądań, sprawdza również status anulowania w wywołaniu zwrotnym, aby ukryć błędy w bloku błędów. (w maszynopisie)

poziom kontrolera:

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

w moim http:

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

metody pomocnicze

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

teraz patrząc na kartę sieci, widzę, że działa pięknie. zadzwoniłem do tej metody 4 razy i przeszła tylko ostatnia.

Możesz dodać niestandardową funkcję do $httpusługi za pomocą „dekoratora”, który dodałby abort()funkcję do twoich obietnic.

Oto działający kod:

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

Ten kod używa funkcji dekoratora angularjs w celu dodania with_abort()funkcji do$http usługi.

with_abort()używa $httpopcji limitu czasu, która pozwala przerwać żądanie HTTP.

Zwrócona obietnica jest modyfikowana w celu włączenia abort()funkcji. Posiada również kod, aby upewnić się, że abort()działa, nawet jeśli łączysz obietnice.

Oto przykład, w jaki sposób chcesz go użyć:

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

Domyślnie po wywołaniu abort()żądanie zostaje anulowane i żaden z programów obsługi obietnic nie jest uruchamiany.

Jeśli chcesz, aby procedury obsługi błędów były nazywane pass true abort(true).

W module obsługi błędów możesz sprawdzić, czy „błąd” był spowodowany „przerwaniem”, sprawdzając xhrStatuswłaściwość. Oto przykład:

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