在挂起的http请求期间Angular js页面重新加载错误

Question

在正在进行的http get请求期间（页面完全加载之前）的单个页面angular App中，如果我重新加载页面，则调用所有http请求errorcallbacks。我使用谷歌浏览器。 将下面的代码保存在html文件中，并在打开页面后重新加载页面以重现问题。 这打破了整个页面，因为它显示了所有被调用的API的警报。 如果有50个挂起的http请求，我在http请求期间重新加载页面时得到50个错误警报。我不想从http get的errorCallBack函数中删除警报。如果我在所有ajax http请求完成后重新加载页面，则它不会显示任何错误。 请帮我解决这个问题。

<div ng-app="iceApp" ng-controller="allCharacterController as myCharacter"> 

<input type="text" id="search1" ng-model="search.name"> 

    <div ng-repeat="book in myCharacter.character | filter : search"> 
    {{book.name}} 
    </div> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
<script type="text/javascript"> 
var myApp = angular.module('iceApp', []); 

myApp.controller('allCharacterController',['$http',function($http) { 

var main = this; 
this.character=[]; 
this.baseUrl = 'https://www.anapioficeandfire.com/api/'; 

    // there were 50 pages to get data from thats why i have made a loop 


this.allCharacters = function(){ 
for(i=1;i<50;i++){ 

$http({ 
    method: 'GET', 
    url: main.baseUrl+"characters?page="+i+"&pageSize=50" 
    }) 
    .then(function successCallback(response) { 
     // this callback will be called asynchronously 
     // when the response is available 
     console.log(response.data); 
     if(response.data.length>0){ 
      main.character.push.apply(main.character,response.data); 
       } 


    }, function errorCallback(response) { 
     // called asynchronously if an error occurs 
     // or server returns response with an error status. 
     alert("some error occurred. Check the console."); 
     console.log(response); 
    }); 
    } 

}// end load all blogs 
    this.allCharacters(); 

}]) 
</script> 

ps：我对此很感兴趣。请帮我解决它。以上是我为重现问题所做的一个简约问题。 实际的Web应用程序我一直在努力：https://codemachin.github.io/gameofthrones/

Answer 1

BookService.getAllHouses([i]) 
.then(function successCallback(response) { 

    if(response.data.length>0){ 
     main.all.push.apply(main.all,response.data); 
      } 
}, function errorCallback(response) { 
    // called asynchronously if an error occurs 
    // or server returns response with an error status. 
    alert("some error occurred. Check the console."); 
    console.log(response); 
    //IMPORTANT 
    throw response; 
}); 

当.catch的处理程序无法重新抛出一个错误，它转换被拒绝的承诺，一个成功的承诺。

---

一种方法是降低警报的数量是用$q.all提供单一的拒绝处理。

this.allHouses = function(){ 
    var promiseList = []; 
    for(let i=1;i<12;i++){ 
     var promise = BookService.getAllHouses([i]) 
     .then(function onSuccess(response) {   
      if(response.data.length>0){ 
       main.all.push.apply(main.all,response.data); 
      } 
      return response.data; 
     }); 
     promiseList.push(promise) 
    }; 

    return $q.all(promiseList)  
     .catch(function onRejection(response) { 
      // called asynchronously if an error occurs 
      // or server returns response with an error status. 
      alert("some error occurred. Check the console."); 
      console.log(response); 
      throw response; 
    }); 
} 

随着$q.all，如果任何承诺与拒绝结算，产生的承诺将与第一拒绝承诺的拒绝值拒绝。

本示例通过让函数返回一个可用于进一步链接的承诺来改进allHouses函数。