带有$ http.get的`while`或`for`循环

Posted 2021-03-26

我想知道是否可以使用while或for嵌套调用$http.get：

这是一个例子：

for (var i = 0; i < $scope.comments.length; i++) {
   alert($scope.comments[i].id); // = 2
   $http.get('/api/logged/like/isliked?id=' + $scope.comments[i].id).success(function(data, status, header, config) {
        alert('Test');
        alert($scope.comments[i].id); // Not executed.
   }).error(function(data){alert('The requeste isn't working');}); }

我把两个alerts显示我用来检索JSON的评论的id。我得到第一个警报的id，然后第二个警告“测试”，但第三个警报没有显示。为什么不？

这是JSON的一个例子：

{data":[
   {"id":2,"is_liked":false,"nb_comments":1,"nb_likes":1,
    "date_creation":"2014-05-26T17:03:54+0000"},
   {"id":1,"is_liked":true,"nb_comments":0,"nb_likes":1,
    "date_creation":"2014-05-26T17:00:26+0000"}
]}

答案

问题：

Don't make functions inside of a loop ...

函数的每次调用实际上都是在内存中引用相同的i副本。每次for循环运行时都会创建一个新的闭包，但每个闭包捕获相同的环境。因此，每次调用$http.get（异步函数）都会导致从循环结束引用i的相同最终值的回调触发。

一个办法：

将i作为参数传递给单独定义的函数：

var getIsLiked = function(i){
  $http.get('isliked.json' + $scope.comments[i].id)
    .success(function(data) {
      console.log('Test');
      console.log('i is ', i);
      console.log($scope.comments[i].id);
  }).error(function(data){console.log("The request isn't working");}); }
}

for (var i = 0; i < $scope.comments.length; i++) {
  getIsLiked(i);
}

Demo

这可能真的难以理解，但是值得深入了解。它不仅可以帮助您避免将来出现类似问题，还可以让您更好地理解闭包，这是javascript中的一个重要概念。

另一答案

第三个警报是在你的error承诺的$http.get回调中。只有在请求失败时才会执行它。如果请求通过则将执行第一个警报，如果请求失败则将启动第三个警报。