AngularJS отменяет все ожидающие запросы $http при изменении маршрута

Ответ 1

Я собрал для этого концептуальный код. Возможно, вам понадобится настройка, соответствующая вашим потребностям. Там pendingRequests служба, которая имеет API для добавления, получения и отмены запросов, httpService, который обертывает $http и гарантирует, что все запросы будут отслеживаться.

Используя объект конфигурации $http (docs), мы можем получить способ отменить ожидающий запрос.

Я сделал plnkr, но вам понадобятся быстрые пальцы, чтобы увидеть, как запросы отменяются, поскольку тестовый сайт, который я нашел, обычно отвечает в течение половины секунды, но вы увидите на вкладке сети devtools, что запросы делают отменить. В вашем случае вы, очевидно, запускаете вызов cancelAll() для соответствующих событий из $routeProvider.

Контроллер должен просто продемонстрировать концепцию.

DEMO

angular.module('app', [])
// This service keeps track of pending requests
.service('pendingRequests', function() {
  var pending = [];
  this.get = function() {
    return 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.canceller.resolve();
    });
    pending.length = 0;
  };
})
// This service wraps $http to make sure pending requests are tracked 
.service('httpService', ['$http', '$q', 'pendingRequests', function($http, $q, pendingRequests) {
  this.get = function(url) {
    var canceller = $q.defer();
    pendingRequests.add({
      url: url,
      canceller: canceller
    });
    //Request gets cancelled if the timeout-promise is resolved
    var requestPromise = $http.get(url, { timeout: canceller.promise });
    //Once a request has failed or succeeded, remove it from the pending list
    requestPromise.finally(function() {
      pendingRequests.remove(url);
    });
    return requestPromise;
  }
}])
// The controller just helps generate requests and keep a visual track of pending ones
.controller('AppCtrl', ['$scope', 'httpService', 'pendingRequests', function($scope, httpService, pendingRequests) {
  $scope.requests = [];
  $scope.$watch(function() {
    return pendingRequests.get();
  }, function(pending) {
    $scope.requests = pending;
  })

  var counter = 1;
  $scope.addRequests = function() {
    for (var i = 0, l = 9; i < l; i++) {
      httpService.get('https://public.opencpu.org/ocpu/library/?foo=' + counter++);  
    }
  };
  $scope.cancelAll = function() {
    pendingRequests.cancelAll();
  }
}]);

Ответ 2

Вы можете использовать $http.pendingRequests для этого.

Во-первых, когда вы делаете запрос, сделайте следующее:

var cancel = $q.defer();
var request = {
    method: method,
    url: requestUrl,
    data: data,
    timeout: cancel.promise, // cancel promise, standard thing in $http request
    cancel: cancel // this is where we do our magic
};

$http(request).then(.....);

Теперь мы отменим все наши ожидающие запросы в $routeChangeStart

$rootScope.$on('$routeChangeStart', function (event, next, current) {

    $http.pendingRequests.forEach(function(request) {
        if (request.cancel) {
            request.cancel.resolve();
        }
    });
});

Таким образом вы также можете "защитить" определенный запрос от отмены, просто не предоставив запрос "отменить" в запросе.

Ответ 3

Я думаю, что это лучшее решение для отмены запросов. Он использует событие перехватчика и $routeChangeSuccess. http://blog.xebia.com/cancelling-http-requests-for-fun-and-profit/

Ответ 4

Обратите внимание, что im new с Angular, поэтому это может быть не оптимальным. Другим решением может быть: в запросе $http с добавлением аргумента "timeout", Docs Я сделал это следующим образом:

В factory, где я звоню во все службы Rest, используйте эту логику.

module.factory('myactory', ['$http', '$q', function ($http, $q) {
    var canceler = $q.defer();

    var urlBase = '/api/blabla';
    var factory = {};

    factory.CANCEL_REQUESTS = function () {
        canceler.resolve();
        this.ENABLE_REQUESTS();
    };
    factory.ENABLE_REQUESTS = function () {
        canceler = $q.defer();
    };
    factory.myMethod = function () {
        return $http.get(urlBase, {timeout: canceler.promise});
    };
    factory.myOtherMethod= function () {
        return $http.post(urlBase, {a:a, b:b}, {timeout: canceler.promise});
    };
    return factory;
}]);

и в конфигурации приложения Angular у меня есть:

return angular.module('app', ['ngRoute', 'ngSanitize', 'app.controllers', 'app.factories',
    'app.filters', 'app.directives', 'ui.bootstrap', 'ngGeolocation', 'ui.select' ])
.run(['$location', '$rootScope', 'myFactory', function($location, $rootScope, myFactory) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        myFactory.CANCEL_REQUESTS();
        $rootScope.title = current.$$route.title;
    });
}]);

Таким образом, он улавливает все изменения "маршрута" и останавливает весь запрос, настроенный с помощью этого "таймера", чтобы вы могли выбрать, что для вас важно.

Я надеюсь, что это кому-то поможет. Отношения