AngularJS 在路由更改时中止所有挂起的 $http 请求

IT技术 javascript angularjs
2021-02-26 10:32:33

请先通过代码

应用程序.js

var app = angular.module('Nimbus', ['ngRoute']);

路由.js

app.config(function($routeProvider) {
    $routeProvider
    .when('/login', {
        controller: 'LoginController',
        templateUrl: 'templates/pages/login.html',
        title: 'Login'
    })
    .when('/home', {
        controller: 'HomeController',
        templateUrl: 'templates/pages/home.html',
        title: 'Dashboard'
    })
    .when('/stats', {
        controller: 'StatsController',
        templateUrl: 'templates/pages/stats.html',
        title: 'Stats'
    })
}).run( function($q, $rootScope, $location, $route, Auth) {
    $rootScope.$on( "$routeChangeStart", function(event, next, current) {
        console.log("Started");


        /* this line not working */
        var canceler = $q.defer();
        canceler.resolve();

    });

    $rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
        $rootScope.title = ($route.current.title) ? $route.current.title : 'Welcome';
    });
 })

家庭控制器.js

app.controller('HomeController',
    function HomeController($scope, API) {
        API.all(function(response){
            console.log(response);
        })
    }
)

stats-controller.js

app.controller('StatsController',
    function StatsController($scope, API) {
        API.all(function(response){
            console.log(response);
        })
    }
)

api.js

app.factory('API', ['$q','$http', function($q, $http) {    
    return {
        all: function(callback) {
            var canceler = $q.defer();
            var apiurl = 'some_url'
            $http.get(apiurl,{timeout: canceler.promise}).success(callback);
        }
    }
}]);

当我从家搬到 stats 时,API 将再次发送 http 请求,我有很多这样的 http 调用,我只粘贴了几行代码。

我需要的是我需要在 routechangestart 或成功时取消中止所有挂起的 http 请求

或者任何其他实现相同的方法?

4个回答

我为此整理了一些概念性代码。它可能需要调整以满足您的需求。有一个pendingRequests服务具有用于添加、获取和取消请求的 API,httpService它包装$http并确保跟踪所有请求。

通过利用$http配置对象(docs),我们可以获得一种取消待处理请求的方法。

我已经制作了一个 plnkr,但是您需要快速查看请求被取消,因为我发现的测试站点通常会在半秒内响应,但是您会在 devtools 网络选项卡中看到请求确​​实被取消了。在您的情况下,您显然会触发对cancelAll()来自$routeProvider.

控制器只是为了演示这个概念。

演示

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();
  }
}]);
@SrikanthKondaparthy 我想您可以进一步调整它以添加超时,但我不再真正使用 angular,所以我不知道是否有任何可以使用的核心功能。天真的解决办法是使用setTimeoutresolve()30秒后的消除(并记住clearTimeout,如果它成功,但有可能是更好的解决方案。我个人认为,如果有同花30秒,请求问题,那么主要问题是对事物的服务器端尽管 :)
2021-04-21 10:32:33
谢谢你 - 我很惊讶这对于更多正在建造水疗中心的人来说并不是必需的。虽然我认为最好的解决方案是通过自定义服务堆叠请求,但您的代码已经将我推向了这个方向。
2021-04-27 10:32:33
@ jmb.mage我们的http-包装有类似的功能,但它暴露了getpostput等和与会代表,它利用一个单一的内部方法$http配置对象。我只是想出将一切都交给我的例子是噪音,因为背景是如何中止请求:)不要忘了到HTTP动词添加到待处理列表的关键,而在的情况下,POSTPUT也是一个字符串化版本的数据。
2021-05-03 10:32:33
设置与此类似:stackoverflow.com/questions/22090792/...除了不处理取消请求而是防止重复请求。
2021-05-05 10:32:33

你可以用它$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();
        }
    });
});

通过这种方式,您还可以通过在请求中不提供“取消”字段来“保护”某些请求不被取消。

这会获得 Promise 下的延迟对象的句柄并过早地解决它。这与“取消”AJAX 请求本身不同,后者仍将在服务器上处理并返回。这不仅会过早地触发Promise上的所有 .then() 处理程序(可能导致空异常,因为他们期望响应对象),我还希望它在实际的 AJAX 回调不可避免地尝试时抛出双重解析异常又解决了?
2021-04-23 10:32:33
埃里克,我对此进行了测试,并且有效。如果您查看文档(docs.angularjs.org/api/ng/service/$http),它指出请求的“超时”属性可以是Promise(超时 – {number|Promise} – 以毫秒为单位的超时,或Promise在解决时应中止请求。)。属性“取消”只是给了我们自己做的权力,所以当我们自己解决它时,请求就像它达到了超时。
2021-04-29 10:32:33
此外,如果您在这里查看大多数 +1 的答案,它会做完全相同的事情,但在结构上更好,因为它包含在服务中。
2021-05-09 10:32:33
太棒了,如果您将自己的拦截器添加到 $httpProvider.interceptors 中,它甚至可以与 $resource 一起使用,该拦截器将必填字段设置为传出请求。
2021-05-12 10:32:33
好吧,我没有真正意识到底层实现是如何工作的。为最小的工作解决方案添加 +1。
2021-05-16 10:32:33

我认为这是中止请求的最佳解决方案。它使用拦截器和 $routeChangeSuccess 事件。 http://blog.xebia.com/cancelling-http-requests-for-fun-and-profit/

我遇到的最佳解决方案也适用于 $resource,因为它包装了 $http。
2021-05-11 10:32:33

请注意,我是 Angular 的新手,所以这可能不是最佳选择。另一个解决方案可能是:在 $http 请求中添加“超时”参数,文档我是这样做的:

在我调用所有 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;
}]);

在角度应用程序配置上,我有:

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

通过这种方式,它会捕获所有“路由”更改并停止使用该“计时器”配置的所有请求,以便您可以选择对您来说至关重要的内容。

我希望它对某人有所帮助。问候