javascript - 在我的例子中如何获取异步数据

Question

我正在尝试设置一项服务，并希望我的应用程序中的 Controller 从该服务获取数据。

我有类似的东西

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

在我的另一个 Controller 中

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

//testService.getProducts() returns undefined.

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

Answer 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 有两个回调，一个用于完成，一个用于错误。您可以根据需要处理 View 模型中的错误。