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

我是AngularJS的新手，正在用Twitch API试验AngularJS。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.

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

有人可以给我一个指针吗？由于

来源

2015-11-05 user1157751

$ HTTP是异步的，DATA_LIST不会从服务器上的数据，因此它返回0提交，你可以安慰它的$的成功回调内部HTTP –

代码执行异步data_list.push（数据） ;将在console.log后发生。 –

@shushanthp好吧，范围内有'data_list'，但是你说的正确，只有在成功回调被调用之后才会推送任何数据。 – jensgram

没有，这条线：当您收到的HTTP请求的响应发送上述线路

data_list.push(data);

将被执行。因此，下面几行：

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

将输出[]和0

来源

2015-11-05 09:44:19

感谢您的回应！有没有办法阻止直到异步代码完成？ – user1157751

即使有这样的工具（我实际上不知道它是否存在），这是一个不好的解决方案。 JS使用基于回调的非阻塞异步调用 –

嗯......我想是的，因为JS是一个单线程应用程序。我可能需要重新考虑它是如何完成的。 – user1157751

我没有使用过它，但你又能使用，以便$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); 
});

来源

2015-11-05 10:00:57 Drumbeg

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

回答

相关问题