能夠訪問服務返回的對象，但是訪問其屬性會給出未定義的信息

Question

我是一個有角度的初學者，我正試圖建立一個工廠，從我的php后端獲取數據並更新控制器。 這是我的基本代碼：

廠

app.factory('sessionStatus', ['$http', function($http){
    return {
        status:function(){
            var status = {};
            $http.get('/game_on/api/api.php?session-status')
            .then(function(response){
                angular.copy(response.data, status);
            });
            return status;
        }
    };
}]);

控制者

app.controller('headerCtrl', ['$scope', 'sessionStatus', function($scope, sessionStatus){

    $scope.sessionStatus = sessionStatus.status();

    console.log($scope.sessionStatus);

}]);

這在控制台中提供了以下內容：

Object{}
  session:"false"

但是，當我調整控制器以記錄會話屬性的值時，如下所示：

console.log($scope.sessionStatus.session);

我只是在控制台中未定義。

我究竟做錯了什么？

編輯

對於遭受我獨特的智力障礙困擾的其他人，這是我得出的結論：

問題的主要原因是，我一直試圖在$ http服務的承諾得到解決之前（即，在.then()完成執行之前.then()訪問$ http服務返回的異步生成的信息，這導致未定義記錄，因為實際上尚未定義數據，因為在控制器中調用console.log()時，仍在處理生成數據的請求。

使用$ timeout服務，我能夠延遲console.log()的調用，這導致將數據正確記錄到控制台。

$timeout(function(){
    console.log($scope.sessionStatus.session);
}, 2000); // logs "false" to the console like originally expected

我以前的想法是我應該在控制器內使對工廠方法的調用盡可能短，然后在該調用之外對它的結果進行操作。 這顯然不是一個好主意，因為存在.then() ，以便您可以在請求完成的確切時刻對異步請求的結果進行操作。

事后看來，這一切似乎如此顯而易見，但希望這種解釋將來會對其他人有所幫助...

感謝您收到的所有答復，它們對您有很大幫助！

Answer 1

您可以在此處對代碼進行幾處更改。 首先，我建議解決承諾並在控制器而不是服務中分配值。 接下來，您無需在結果對象上使用Angular.Copy，只需進行變量分配即可。 嘗試類似以下的操作，然后擴展：

app.factory('sessionStatus', ['$http', function($http){

    return {status: $http.get('/game_on/api/api.php?session-status')}

}]);

和

app.controller('headerCtrl', ['$scope', 'sessionStatus', function($scope, sessionStatus){

    sessionStatus.status.then(function(result){
        $scope.sessionStatus = result.data; //or some property on result
    });

}]);

Answer 2

由於javascript是異步的，因此它不會等到http響應並返回狀態。 那就是為什么它返回null的原因。 嘗試這樣的事情

   app.factory('sessionStatus', ['$http', function($http){
            return {
                status:function(){
                 $http.get('/game_on/api/api.php?session-status')
                }
            };
        }]);

        app.controller('headerCtrl', ['$scope', 'sessionStatus', function($scope, sessionStatus){

            $scope.sessionStatus = sessionStatus.status().then(function(response) { 
               console.log(response);
        });


    }]);

Answer 3

嘗試退還您factory的承諾：

app.factory('sessionStatus', ['$http', function($http) {
  var factory = {
    status: status
  };

  return factory;

  function status() {
    return $http.get('/game_on/api/api.php?session-status');
  }
}]);

然后在控制器中 ：

app.controller('headerCtrl', ['$scope', 'sessionStatus', function($scope, sessionStatus) {
  function getSuccess(response) {
    $scope.sessionStstus = response.data;
  }

  function getError(response) {
    console.log('error');
  }

  sessionStatus.status()
    .then(getSuccess)
    .catch(getError);

  console.log($scope.sessionStatus);
}]);