While working on a single-page Angular app and making ongoing HTTP requests, I encountered an issue where if I reload the page before it fully loads, all the error callbacks for the HTTP requests are triggered. This happens when using Google Chrome.
To reproduce this problem, save the following code in an HTML file and reload the page immediately after opening it:
<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/';
// Loop through 50 pages to get data
this.allCharacters = function(){
for(i=1;i<50;i++){
$http({
method: 'GET',
url: main.baseUrl+"characters?page="+i+"&pageSize=50"
})
.then(function successCallback(response) {
console.log(response.data);
if(response.data.length>0){
main.character.push.apply(main.character,response.data);
}
}, function errorCallback(response) {
alert("some error occurred. Check the console.");
console.log(response);
});
}
}
this.allCharacters();
}])
</script>
I am looking for a solution to prevent these error alerts from disrupting the page when multiple HTTP requests are pending. Any help would be greatly appreciated!
For more context, you can visit the actual web application I've been working on here.