Erreur de rechargement de la page js angulaire pendant les requêtes http en attente

Question

Dans une application angulaire à une seule page pendant les requêtes HTTP get en cours (avant le chargement complet de la page), si je recharge la page, toutes les demandes HTTP errorcallbacks sont appelées. J'utilise Google Chrome. Enregistrez le code ci-dessous dans un fichier html et rechargez la page juste après son ouverture pour reproduire le problème. Cela interrompt la page entière car il affiche les alertes de toutes les API appelées. S'il y a 50 demandes http en attente, j'obtiens 50 alertes d'erreur lors du rechargement de la page pendant la requête http.Je ne veux pas supprimer l'alerte de la fonction errorCallBack du http get. Si je recharge la page après que toutes les requêtes http ajax sont terminées alors cela ne montre aucune erreur. S'il vous plaît aidez-moi à contourner ce problème.

<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: Je suis vraiment frappé par cela. S'il vous plaît, aidez-moi à le contourner. Ci-dessus est une question minimaliste que j'ai faite pour reproduire le problème. application web réelle j'ai travaillé sur: 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; 
}); 

Lorsqu'un gestionnaire .catch ne parvient pas à re-jeter une erreur, il convertit une promesse rejetée à une promesse de succès.

---

Une approche est de réduire le nombre d'alertes est d'utiliser $q.all pour fournir un seul gestionnaire de rejet.

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

Avec $q.all, si l'une des promesses est réglé avec un rejet, la promesse résultant sera rejetée avec la valeur de rejet de la première promesse rejetée.

Cet exemple améliore la fonction allHouses en lui faisant renvoyer une promesse pouvant être utilisée pour d'autres chaînages.