angularjs - 从 angular.factory 中的 $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 :

 .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。我似乎无法提取这里的数据，请参阅 Controller 中的“//问题”行。

我的猜测是，我以某种方式错误地设置了我的工厂，或者没有以某种方式在工厂之外提供该属性。 Angular 新手，所以在理解这一点时遇到一些困难。

如果需要任何其他信息，请告诉我。

Answer 1

这里的问题在于 $resource 的异步性质，以及控制台如何与数据交互。

.query() 是异步调用，这意味着它不会立即返回值；相反，它允许代码继续流动。您的下一条语句是 console.log($scope.member); ，它不会立即扩展 $scope.member 以查看其属性，直到使用或检查它们。下一个调用是 console.log($scope.member.someProperty); ，它将扩展 $scope.member 以便找到 someProperty 。由于对 .query() 的回调尚未返回，这将记录 undefined 。当您检查 first 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
    });
}