爲什麼我的控制器中的執行順序在AngularJS中沒有正確的順序？

Question

您好我已經做出了控制器：

app.controller('CalendarCtrl', ['$scope', 'apiService', function($scope, apiService) { 

/* event source that contains custom events on the scope */ 
$scope.events = []; 
apiService.get('events').then(function(results) { 
    $scope.events = results.data; 
    console.log(results.data); 
}); 
console.log($scope.events);}); 

我用兩個console.log檢查輸出和調用的順序。而results.data應該返回：

[Object] 
---> [0]: Object 
------> all_day: "1" 
------> end: "2016-11-23 10:52:21" 
------> id: "1" 
------> start: "2016-11-22 10:52:21" 
------> title: "Test Event" 
------> url: null 
---> [1]: Object 
... 

但結果，我得到我的第一個輸出爲空對象，應在第二console.log的輸出。這意味着控制器跳過apiService.get函數並首先運行代碼的其餘部分。

然後我試圖

$scope.events = []; 

$scope.events = apiService.get('events').then(function(results) { 
    return $scope.events = results.data; 
}); 
console.log($scope.events); 

但是這一次，我得到：

d {$$state: Object} 
---> $$state: Object 
------> status: 1 
------> value: Array[1] 
---------> [0]: Object 
------------> all_day: "1" 
------------> end: "2016-11-23 10:52:21" 
------------> id: "1" 
------------> start: "2016-11-22 10:52:21" 
------------> title: "Test Event" 
------------> url: null 

成經我希望$$state內的結果。

有人能告訴我爲什麼會發生這種情況嗎？謝謝。

Answer 1

你所看到的是正確的預期行爲。在初始代碼：

app.controller('CalendarCtrl', ['$scope', 'apiService', function($scope, apiService) { 

/* event source that contains custom events on the scope */ 
$scope.events = []; 
apiService.get('events').then(function(results) { 
    $scope.events = results.data; 
    console.log(results.data); 
}); 
console.log($scope.events);}); 

預計第二console.log($scope.events);將console.log(results.data);前被打印，並且將打印一個空數組，這是該範圍變量與初始化的值。你應該期待的原因是apiService.get（...）返回一個promise，這意味着該服務方法將完成的工作是異步的，並且只有在結果解析後，該回調纔會被執行。因爲Javascript是單線程的，所以在承諾被履行/拒絕之前，應用程序不會阻塞，所以在服務方法之後編寫的其他代碼將立即執行。

---

在你的第二個片段：

$scope.events = []; 

$scope.events = apiService.get('events').then(function(results) { 
    return $scope.events3 = results.data; 
}); 
console.log($scope.events); 

你實際上是分配承諾變量$scope.events，這是正在打印什麼。您在承諾的value財產中看到預期結果的唯一原因是，承諾已經解決;如果事件發生需要更長的時間，那麼將承諾打印到屏幕上時就不可用了。

---

所以，綜上所述，由於事件正在獲取異步，你無法預料到打印出來的同步代碼，因爲沒有保證，他們將通過執行同步代碼的時間來解決。相反，正確的方法是在承諾的成功回調中處理/打印它們：

$scope.events = []; 
apiService.get('events').then(function(results) { 
    // ASSUMING THE DATA WAS FETCHED SUCCESSFULLY, YOU ARE GUARANTEED TO HAVE IT WHEN THIS CALLBACK IS EXECUTED. 
    $scope.events = results.data; 
    console.log(results.data); 
});