Как отменить запрос $ http в AngularJS?

Учитывая запрос Ajax в AngularJS

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

Каков наиболее эффективный способ отменить этот запрос, если запущен другой запрос (такой же сервер, например, другие параметры).

Эта функция была добавлена ​​в выпуск 1.1.5 с помощью параметра времени ожидания:

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

Отмена Angular $ http Ajax с помощью свойства timeout не работает в Angular 1.3.15. Для тех, кто не может дождаться, когда это будет исправлено, я поделюсь решением jQuery Ajax, обернутым в Angular.

Решение включает в себя две услуги:

• HttpService (обертка вокруг функции jQuery Ajax);
• PendingRequestsService (отслеживает ожидающие / открытые запросы Ajax)

Здесь идет служба 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);

Сервис 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);

Позже в вашем сервисе при загрузке данных вы будете использовать HttpService вместо $ http:

(function (angular) {

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

        this.getResources = function (params) {

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

        };
    }]);

})(window.angular);

Позже в вашем коде вы хотели бы загрузить данные:

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

Отмена запросов, выданных с помощью $http, не поддерживается в текущей версии AngularJS. Существует открытый запрос на добавление этой возможности, но этот PR еще не рассматривался, поэтому неясно, собирается ли он превратиться в ядро ​​AngularJS.

Если вы хотите отменить отложенные запросы на stateChangeStart с помощью ui-router, вы можете использовать что-то вроде этого:

// в сервисе

                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;

// в конфигурации 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();
          }
       });
    });

По какой-то причине config.timeout у меня не работает. Я использовал этот подход:

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

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

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

И отменитьRequest.resolve (), чтобы отменить. На самом деле это не отменяет запрос, но вы, по крайней мере, не получаете ненужный ответ.

Надеюсь это поможет.

Это расширяет принятый ответ, украшая службу $ http методом прерывания следующим образом ...

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

ЧТО ЭТО ДЕЛАЕТ КОДЕКС?

Для отмены запроса должен быть установлен тайм-аут. Если для HTTP-запроса тайм-аут не установлен, то код добавляет тайм-аут «обещания». (Если тайм-аут уже установлен, то ничего не меняется).

Тем не менее, чтобы выполнить обещание, нам нужен дескриптор «отложенного». Таким образом, мы используем карту, чтобы потом получить «отложенный». Когда мы вызываем метод abort, с карты извлекается «deferred», а затем мы вызываем метод resolve для отмены http-запроса.

Надеюсь, это кому-нибудь поможет.

ОГРАНИЧЕНИЯ

В настоящее время это работает только для $ http.get, но вы можете добавить код для $ http.post и т. Д.

КАК ПОЛЬЗОВАТЬСЯ ...

Затем вы можете использовать его, например, при изменении состояния следующим образом ...

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

Вот версия, которая обрабатывает несколько запросов, а также проверяет состояние отмены в обратном вызове для подавления ошибок в блоке ошибок. (в машинописном тексте)

Уровень контроллера:

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

в моем 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(() => { });
    }

вспомогательные методы

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

теперь, глядя на вкладку сети, я вижу, что она работает превосходно. я вызвал метод 4 раза, и только последний прошел.

Вы можете добавить пользовательскую функцию к $httpсервису, используя «декоратор», который добавитabort() функцию к вашим обещаниям.

Вот некоторый рабочий код:

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

Этот код использует функциональность декоратора angularjs для добавления with_abort()функции в $httpсервис.

with_abort()использует $httpопцию тайм-аута, которая позволяет прервать HTTP-запрос.

Возвращенное обещание модифицируется, чтобы включить abort()функцию. Он также имеет код, чтобы убедиться, что abort()работает, даже если вы цепочки обещаний.

Вот пример того, как вы бы это использовали:

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

По умолчанию при вызове abort()запрос отменяется, и ни один из обработчиков обещаний не запускается.

Если вы хотите, чтобы ваши обработчики ошибок вызывались, передайте true abort(true).

В вашем обработчике ошибок вы можете проверить, была ли «ошибка» вызвана «отменой», проверив xhrStatusсвойство. Вот пример:

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