当$ http请求返回错误时,AngularJS会创建无限循环

时间:2015-06-04 14:28:09

标签: angularjs http

我的问题非常简单,但我无法找到发生的事情。

我想要做的就是阅读本地REST API中的所有帖子。当我从API响应HTTP 401时,AngularJS会在无限循环中不断重复GET请求。

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([]);
    });

控制台告诉我:

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

为了更好地理解我创建了一个plunker:http://embed.plnkr.co/R4tYUHei9vkylPgvAT5B/ (如果你取消注释app.js中的代码,你的浏览器会因无限循环而崩溃)

有人能告诉我这里发生了什么,为什么?

1 个答案:

答案 0 :(得分:5)

当作用域上的对象为always changing.时,角度会发生无限摘要。如果没有看到更多代码,我们无法确定导致这种情况的原因。

不确定这是否会导致您的问题,但您当前的$http.get无法正确处理错误,即您的HTTP 401

你需要做这样的事情:

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

then()方法有两个参数,一个成功回调和一个错误回调。 Read more about $http.

<强>更新

查看我对plunker.

的更新

无限摘要似乎来自于使用ngRepeat中的函数:

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

$scope上创建一个数组并在ngRepeat中使用它修复了:

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

此外,$http会自行返回一个承诺,因此您无需使用$q。只需将范围上的数组指向已解析的数据:

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