問題

angular項目中路由采用了常用的ui-router，但是進(jìn)行暴力測試時候，快速切換多個頁面時候，會出現(xiàn)閃爍現(xiàn)象，大量請求造成了頁面卡死。

原因

查看一下network就很明顯了...沒有對請求進(jìn)行cancel設(shè)置，當(dāng)路由切換到下一個頁面時候，未完成的請求仍在繼續(xù)，這是很不合理的，因此需要統(tǒng)一配置路由切換時候cancel掉當(dāng)前頁面未完成的請求。

解決方案

直接上代碼：

首先在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