请求 Javascript/Angular 遇到异步问题

Question

我有一些代码可以执行以下操作.... 第一个 get 调用基本上只是给出数据中的帖子列表。然后对于每个帖子，我想加载第二个 get 调用给出的许多回复。问题是，它实际上是通过循环，然后只加载最后一个回复。

 http.get("../api/sortpost/trending").success(function (data){
            scope.posts = data;
            for(var i = 0; i < scope.posts.length; i++){
              post=scope.posts[i];
              console.log(i); //prints 1 to i as expected
              http.get("/api/postreply/"+post.id).success(function (data){
                post.replies = data;
                console.log(i); //prints i only i number of times
              });
            }
      });

有人知道怎么解决吗？我猜我循环太快了，get 请求没有足够的时间来处理。因此，我的 post.replies 和 i 发生了一些有趣的事情，并且在请求实际完成之前帖子正在更改。

Answer 1

elclanrs 的评论正确地解决了这个问题，你可以尝试创建一个 promises 数组并一次执行它们，然后一次获取所有结果的列表：

 var promisesArray=[];
 for(var i = 0; i < scope.posts.length; i++) {
        post=scope.posts[i];
        console.log(i); //prints 1 to i as expected
        promisesArray.push(http.get("/api/postreply/"+post.id));
 }

然后：

$q.all(promisesArray).then(function(aggregateData){
   console.log(aggregateData);
})

Answer 2

您的帖子{ post=scope.posts[i];} 正在对循环的每个项目进行修改。 生成的帖子将是数组 scope.posts 中的最后一项 IE。 post = {some last one}

这就是为什么您只看到一个帖子请求的原因，因为 Angular 会缓存具有相同 url 的帖子请求。

这是因为 javascript 是单线程的，因此您的循环将运行并且获取请求将被排队。在您的循环结束后，所有$http.get 将看到相同的值，即通过clousers 发布的最后一个值。

您可以使用立即调用的函数来解决这个问题。

    (function(myPost){
                 http.get("/api/postreply/"+myPost.id).success(function (data){
                    post.replies = data;
                    console.log(i); //prints i only i number of times
                  });
    })(post);