從角度工廠的$ resource響應中獲取數據

Question

我有這個工廠：

.factory("Member", function($resource) {
    var endpoint = "http://some valid url";

    function generateMemberToken (id1, id2) {
        return $resource(endpoint, null, {
            query: {
                method: 'GET',
                headers: {
                    'id1': id1,
                    'id2': id2
                }
            }
        })
    }

    var member = {
        generateMemberToken : generateMemberToken
    }

    return member;
})

而這個控制器：

 .controller('memberKeyCtrl', function($scope, Member){

    $scope.generateMemberToken = function () {
        $scope.member = Member.generateMemberToken('123456789', '789456123').query();
        console.log($scope.member);
        console.log($scope.member.someProperty); // problem here
    }

$ scope.member是來自API的JSON響應，即

 {firstName:Joe, lastName:smith}

我可以在控制台中看到我的輸出“$ scope.member”並且它具有我在這里尋找的屬性，稱為.someProperty。 我似乎無法提取該數據，因為我在這里看到它，請參閱控制器中的“//問題在這里”行。

我的猜測是，我以某種方式錯誤地設置了我的工廠，或者我沒有在工廠外以某種方式提供該屬性。 角度新，因此在理解這一點時遇到一些麻煩。

如果需要任何其他信息，請告訴我。

Answer 1

這里的問題是$ resource的Async特性，以及控制台如何與您的數據交互。

.query()是一個異步調用，這意味着它不會立即返回值; 相反，它允許代碼繼續流動。 你的下一個聲明是console.log($scope.member); ，在使用或檢查它們之前，它不會立即擴展$scope.member以查看它的屬性。 下一個調用是console.log($scope.member.someProperty); ，這會擴展$scope.member以找到一些someProperty 。 由於.query()的回調尚未返回，因此將記錄undefined 。 當你去檢查第一個 console.log ，回調已經完成，所以對象看起來好像一直都有所有的屬性，即使它不是真的，當時它們試圖訪問。

處理此問題的簡單方法是將調用包裝在.then() ，以確保在從.query()的promise返回之后才執行它們。 為了鏈接.then() ，你需要訪問返回的promise，即

$scope.generateMemberToken = function () {
    $scope.member = Member.generateMemberToken('123456789', '789456123')
    .query().$promise.then(function(){
        console.log($scope.member);
        console.log($scope.member.someProperty); // problem here
    });
};

.query()函數語法允許匿名回調，這將允許您傳遞應在query()完成時執行的函數，而不是鏈接.then()語句。 例如：

 $scope.generateMemberToken = function () {
    $scope.member = Member.generateMemberToken('123456789', '789456123')
    .query({}, function() {
        console.log($scope.member);
        console.log($scope.member.someProperty); // problem here
    });
}