待处理的HTTP请求期间出现Angular js页面重新加载错误

Question

In a single page angular App during the time of ongoing http get requests (before the page is fully loaded) , if i reload the page , all the http request errorcallbacks are called . I use google chrome. Save the below code in an html file and reload the page just after it is open to reproduce the problem. This breaks the whole page because it shows alerts from all the APIs being called. If there are 50 pending http requests i get 50 error alert on reloading the page during the http request.I donot want to remove the alert from the errorCallBack function of the http get. If i reload the page after all the ajax http requests are completed then it doesnot show any error. Please help me get around this problem.

<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: I am really struck on this. Please help me get around it. Above is a minimalistic question i have made to reproduce the problem. Actual web Application i have been working on : 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;
});

When a .catch handler fails to re-throw an error, it converts a rejected promise to a successful promise.

---

One approach is to reduce the number of alerts is to use $q.all to provide a single rejection handler.

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

With $q.all , if any of the promises is settled with a rejection, the resulting promise will be rejected with the rejection value of the first rejected promise.

This example improves the allHouses function by having it return a promise that can be used for further chaining.