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

Question

在进行 http get 请求期间（页面完全加载之前）的单页 angular 应用程序中，如果我重新加载页面，则会调用所有 http 请求错误回调。我使用谷歌浏览器。 将以下代码保存在 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，如果任何一个promise 以rejection 的方式解决，则生成的promise 将以第一个rejected Promise 的rejection 值被拒绝。

这个例子改进了allHouses 函数，让它返回一个可用于进一步链接的promise。