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

时间:2015-03-18 19:11:46

标签: javascript angularjs xmlhttprequest

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

我有类似

的东西
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在应用首次加载时不知道该产品是什么。我该如何解决这个问题?非常感谢!

1 个答案:

答案 0 :(得分: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);
        })
    }
]);

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