在我的情况下如何获取异步数据答案

【问题标题】：How to get the asynchronous data in my case在我的情况下如何获取异步数据
【发布时间】：2015-03-19 04:50:28
【问题描述】：

我正在尝试设置服务并希望我的应用程序中的控制器从服务中获取数据。

我有类似的东西

angular.module('myApp').service('testService', ['Product',
    function(Product) {
        var products

        //Product is a $resource object to send an http request
        Product$.query({
            id: 123
        }, function(object) {
            setProducts(object); 
        });

        var setProducts = function(object) {
            products = object;
        }

        var getProducts = function() {
            return products;
        }

        return {
            setProducts: setProducts,            
            getProducts: getProducts
        };
    }
]);

在我的另一个控制器中

angular.module('myApp').controller('productController', ['$scope', 'testService',
    function($scope, testService) {
        //return undefined...
        console.log(testService.getProducts())
    }
]);

//testService.getProducts() returns undefined.

我认为原因是因为我正在发出$http 请求并且它是异步的，所以 testService 不知道应用程序首次加载时产品是什么。我该如何解决这个问题？非常感谢！

【问题讨论】：

看看 Promise/Deferred 模式。 AngularJS 有自己的实现（$q）。
您输入了错误的查询：您输入了Product$.query 而不是Product.$query。另一件事，$query 函数返回一个对象，该对象将在请求完成时自动填充，因此您可以将其直接分配给您的变量 products
对不起，这是query 而不是$query [链接] (docs.angularjs.org/api/ngResource/service/$resource)

标签： javascript angularjs xmlhttprequest

【解决方案1】：

我使用 promise "q$" 来处理异步调用：

angular.module('myApp').service('testService', ['Product',
    function(Product, $q) {
        var products



        var setProducts = function(object) {
            products = object;
        }

        var getProducts = function() {
            var deferred = $q.defer();
            //Product is a $resource object to send an http request
            Product$.query({
                id: 123
            }, function(object) {
                setProducts(object); 
                deferred.resolve(object);
            });

            return deferred.promise;
        }

        return {
            setProducts: setProducts,            
            getProducts: getProducts
        };
    }
]);


angular.module('myApp').controller('productController', ['$scope', 'testService',
    function($scope, testService) {
        //use a promise
        testService.getProducts().then(function(data){
            console.log(data);
        },
        function (error) { 
            console.log(error);
        })
    }
]);

promise 有两个回调，一个用于完成，一个用于错误。您可以根据需要处理视图模型中的错误。

【讨论】：

正是我需要的。 tyvm