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 - 控制器代碼是逐行執行的嗎？

回答

相關問題