保留中のhttpリクエスト中に角度のjsページリロードエラー

Question

進行中のhttp取得リクエスト中（ページが完全にロードされる前）に単一ページの角度アプリケーションで、ページをリロードすると、すべてのhttpリクエストのerrorcallbackが呼び出されます。私はGoogle Chromeを使用します。 下のコードをhtmlファイルに保存し、問題の再現のために開いた直後にページをリロードしてください。 これは、呼び出されているすべてのAPIからのアラートを表示するため、ページ全体がブレークします。 保留中のHTTPリクエストが50件ある場合、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アプリケーション：

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ハンドラが再スローエラーに失敗しhttps://codemachin.github.io/gameofthrones/、それは成功した約束を拒否約束を変換します。

---

一つのアプローチアラートの数を減らすことである単一拒否ハンドラを提供するために、$q.allを使用することです。 $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; 
    }); 
} 

約束のいずれかが拒否して決済される場合には、得られた約束は最初の拒絶約束の拒絶値で拒否されます。

この例では、更なる連鎖に使用できる約束を返して、allHousesの機能を改善しています。