在掛起的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函數。