cancel angular $http请求

问题

angular项目中路由采用了常用的ui-router，但是进行暴力测试时候，快速切换多个页面时候，会出现闪烁现象，大量请求造成了页面卡死。

原因

查看一下network就很明显了...没有对请求进行cancel设置，当路由切换到下一个页面时候，未完成的请求仍在继续，这是很不合理的，因此需要统一配置路由切换时候cancel掉当前页面未完成的请求。

解决方案

直接上代码：

首先在service中配置cancel：

var deferred = $q.defer();
    var self = this;
    $http.get(URL, {timeout : deferred.promise, cancel : deferred}).success(function(data){
        deferred.resolve(data);
    }).error(function(data){
        deferred.reject(data);
    });
    return deferred.promise;

然后在ui-router中配置：

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

参考资料

1. stackoveflow