如何通过异步调用检索数据

时间:2015-03-19 17:46:54

标签: javascript html angularjs

我正在尝试使用promise和service来设置来自http请求的数据。

我有类似的东西

angular.module('myApp').controller('productController', ['$scope', 'testService',
    function($scope, testService) {
        testService.getProducts().then(function(products){
           console.log(products);
        })
        //getFirstProduct is trigger by ng-click user action.
        $scope.getFirstProduct = function(){
            var t = testService.getFirstProduct();
            console.log(t);
         }
    }
]);

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

    var getFirstProduct = function(){
        return firstProduct;
    }

    var setFirstProduct = function(product) {
        firstProduct = product;
    }

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

    return {
        setFirstProduct: setFirstProduct,
        getProducts: getProducts,
        getFirstProduct: getFirstProduct
    };
}
]);

我需要能够获得First产品,但我不知道如何解决这个问题。任何人都可以帮我吗?非常感谢

1 个答案:

答案 0 :(得分:1)

我在代码中看到了一些错误,例如缺少分号,错误的变量/函数名称,以及setProducts正在破坏其变量。 另外,如@manube

所述,增加了$ q

以下情况应该更好:

angular.module('myApp').controller('productController', ['$scope', 'testService',
    function($scope, testService) {
        testService.getProducts().then(function(products){
           console.log(products);
        })
        //getFirstProduct is trigger by ng-click user action.
        $scope.getFirstProduct = function(){
            var t = testService.getFirstProduct();
            console.log(t);
         }
    }
]);

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

    var getFirstProduct = function(){
        return firstProduct;
    }

    var setFirstProduct = function(product) {
        firstProduct = product;
    }

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

    return {
        setFirstProduct: setFirstProduct,
        getProducts: getProducts,
        getFirstProduct: getFirstProduct
    };
}
]);