AngularJS creates infinite loop when $http request returns error

Question

My problem is pretty simple, but I'm not able to find what out what happens.

All I want to do is read all posts from my local REST API. When I'm responding HTTP 401 from the API, AngularJS keeps repeating the GET requests in an infinite loop.

var request = {
        method: 'GET',
        url: 'http://jentzschserverdev-46690.onmodulus.net/index.php/issues',
        headers: {
            'Anonymous': true
        }
    };

$http(request)
    .success(function(data){
        console.log('success', data);
        deferred.resolve(data.issues);
    })
    .error(function(){
        console.log('error');
        deferred.resolve([]);
    });

The console tells me:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.15/$rootScope/infdig?p0=10&p1=%5B%5D
    at angular.js:63
    at Scope.$digest (angular.js:14346)
    at Scope.$apply (angular.js:14571)
    at done (angular.js:9698)
    at completeRequest (angular.js:9888)
    at XMLHttpRequest.requestLoaded (angular.js:9829)(anonymous function) 
    @     angular.js:11655(anonymous function) @ angular.js:8596Scope.$apply 
    @ angular.js:14573done @ angular.js:9698completeRequest 
    @ angular.js:9888requestLoaded @ angular.js:9829 angular.js:63
   Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.15/$rootScope/infdig?p0=10&p1=%5B%5D

For better understanding I created a plunker: http://embed.plnkr.co/R4tYUHei9vkylPgvAT5B/ (if you uncomment the code in app.js, your browser should crash due to the infinite loop)

Can anybody tell me what's happening here and why??

It is not firing the get request. You are changing the model and angular is reaching the limit for the dirty checking algorythm — Raulucco
– Raulucco, Commented Jun 4, 2015 at 14:40
but I'm not accessing any $scope, and the requests gets fired, I can see it in the network tab — Matthias Posch
– Matthias Posch, Commented Jun 4, 2015 at 14:45
This code is not causing the infinite loop, but it's possible that you have some code that is reacting as a result of the failed http request that is causing it. We need to see more of your code to solve this. — Dan
– Dan, Commented Jun 4, 2015 at 14:53

allienx · Accepted Answer · 2015-06-04 18:17:57Z

5

An infinite digest occurs in angular when an object on the scope is always changing. We can't be sure of what's causing this without seeing more of your code.

Not sure if this is causing your problem, but your current $http.get is not correctly handling errors, i.e. your HTTP 401

You need to do something like this:

$http.get('http://mylocalapi/posts').then(
    function(success) {
        console.log('RESPONSE', success);
    }, function(error) {
        console.log('ERROR', error);
    });

The then() method takes two arguments, a success callback and an error callback. Read more about $http.

UPDATE

Check out my update to your plunker.

The infinite digest seemed to come from using a function in your ngRepeat:

<li class='issue' ng-repeat="issue in loadIssues()">
  {{issue.name}}
</li>

Creating an array on the $scope and using it in ngRepeat fixed that:

<li class='issue' ng-repeat="issue in issueList">
  {{issue.name}}
</li>

Also, $http returns a promise itself so you don't need to use $q. Simply point the array on the scope to the resolved data:

$http(request)
  .success(function(data){
    console.log('success : ', data);
    $scope.issueList = data;
  }).error(function(error) {
    console.log('error : ', error);
  });

edited Jun 4, 2015 at 18:17

answered Jun 4, 2015 at 14:51

allienx

8876 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dan Over a year ago

Welcome to SO! This is a good first answer. OP, we need more details.

Matthias Posch Over a year ago

i added a plunker link in the description above

allienx Over a year ago

@MatthiasPosch I updated my answer with a link to a new plunker.

Matthias Posch Over a year ago

thank you, that was the problem...what a noob mistake :/

Collectives™ on Stack Overflow

AngularJS creates infinite loop when $http request returns error

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related