Question

我是AngularJS的新手，正在使用Twitch API试验AngularJS。

我有一个我感兴趣的频道列表，定义为var channels。

然后我使用$http.get函数循环遍历另一个数组twitchList.channels，该数组包含我应该调用的API地址。

(function() {
  var app = angular.module('twitchList', []);

  app.controller('twitchController', ['$http', function($http){
    var twitchList = this;
    twitchList.channels = [];
    var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff", "MedryBW"];

    for (var i = 0; i < channels.length; i++ ) {
      twitchList.channels.push({
        name: channels[i],
        api: 'https://api.twitch.tv/kraken/streams/' + channels[i],
      })
    }  

    var data_list = []; 
    for (var j = 0; j < twitchList.channels.length; j++) {
      $http.get(twitchList.channels[j].api).success(function(data){
        data_list.push(data);
      }) 
    }

    // Issue arises here!
    console.log(data_list);
    console.log(data_list.length);

  }]);

})();

API调用似乎工作正常，但是，我需要将API调用的结果放入一个名为data_list的数组中。现在，当我打印data_list和data_list.length时，会发生data_list.length始终返回0，有时会填充data_list（意味着它是0大小数组或9大小）数组）。即使数组的属性长度为9，但调用.length总是给出0。

这让我觉得控制器代码不是逐行执行的？或者我的逻辑有问题吗？

有人可以给我指针吗？感谢

Answer 1

不，这一行：

data_list.push(data);

当您收到对上面发送的一行的http请求的响应时，将执行

。因此，以下几行：

console.log(data_list);
console.log(data_list.length);

将输出[]和0

Answer 2

我之前没有使用它，但您是否可以使用$q.all来解决多个承诺？我在jQuery中使用了等效的$.when函数来实现这一目的。

var data_list = []; 
var promise_array = [];
var request;

for (var j = 0; j < twitchList.channels.length; j++) {
   request = $http.get(twitchList.channels[j].api);
   request.success(function(data) {
      data_list.push(data);
   });
   promise_array.push(request);
}

$q.all(promise_array).then( function() {
   console.log(data_list);
   console.log(data_list.length);
});

AngularJS - 控制器代码是逐行执行的吗？

2 个答案: