从角度工厂的$ 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.membersomeProperty.query()undefined console.log

处理此问题的简单方法是将调用包装起来.then(),以确保在.query()返回promise之后才执行它们.为了链接.then(),您需要访问返回的承诺,即

$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
    });
}