【问题标题】:angular return a promise [duplicate]角度返回一个承诺[重复]
【发布时间】:2015-10-27 04:19:57
【问题描述】:

我对承诺有疑问。这是详细信息页面的控制器。我想从 Web 服务(或从本地商店(如果已存储))获取项目详细信息。

app.controller('ProductCtrl', function($scope, productsService) {
    //load the product by id from productService
    productsService.get("CODE-1111").then(function(result){
        $scope.currProduct = result;
        $scope.currProductSizes = $scope.currProduct.sizes;
    });
}

app.service('productsService', function($http, localStorageService){
    var _key = 'myProducts'
    var _storedData = []
    var self = this;
    self.get = function(id){
        var i = 0;
        return self.getAll().then(function(result) {
            //get the item by id
            _storedData = result;
            for(i=0;i<_storedData.length;i++){
                if(_storedData[i].id == id)
                    break;
            }
            return _storedData[i];
         });
    }
    self.getAll = function() {
        _storedData = localStorageService.get(_key);
        if(_storedData != null){
            **//How return a promise here? Or how I can handle it**
            return _storedData instanceof Array ? _storedData : [_storedData];
        }
        else{
            var url = baseUrl + "api/GetStyles";
            return $http({method: 'GET', url: url, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }})
                    .then(function(response) {
                            _storedData = mapToProducts(JSON.parse(response.data));
                            return _storedData;
                        }, 
                        function(response) {
                            console.log(response.status);
                    });
        }
    };

})

第一次(商品不在本地商店)一切正常,因为 getAll 方法返回了一个承诺,但第二次它没有返回一个承诺,所以我得到了

Cannot read property 'then' of undefined

我该如何解决这个问题?

【问题讨论】:

    标签: javascript angularjs promise


    【解决方案1】:

    你可以像这样返回一个承诺:

    return $q.when(_storedData instanceof Array ? _storedData : [_storedData]);

    【讨论】:

    • 非常感谢,工作正常!只是一个问题,您认为我使用承诺的方式是否正确?
    • 是的,我认为你处理事情的方式是我见过的许多 Angular 程序的典型。
    【解决方案2】:

    你需要在你的 get 和 getAll 函数中响应一个承诺,我改变了你的函数来做到这一点:

    app.service('productsService', ['$http', '$q', 'localStorageService', function($http, $q, localStorageService){
        var q = $q;
        var _key = 'myProducts';
        var _storedData = [];
        var self = this;
    
        self.get = function(id){
            var deferred = q.defer(); //Initialize your own promise
            var i = 0;
            self.getAll().then(function(result) {
                //get the item by id
                _storedData = result;
                for(i=0;i<_storedData.length;i++){
                    if(_storedData[i].id == id)
                        break;
                }
                return deferred.resolve(_storedData[i]); //This is your response for success
            }).catch(function(error) {
                deferred.reject(error); //This is your response for failure
            });
            return deferred.promise; //return the promise
        }
    
        self.getAll = function() {
            var deferred = q.defer(); //Initialize your own promise
            _storedData = localStorageService.get(_key);
            if(_storedData != null){
                var data = _storedData instanceof Array ? _storedData : [_storedData];
                deferred.resolve(data);
            } else {
                var url = baseUrl + "api/GetStyles";
                $http({method: 'GET', url: url, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }}).then(function(response) {
                    _storedData = mapToProducts(JSON.parse(response.data));
                    deferred.resolve(_storedData); //This is your response for success
                }, function(error) {
                    deferred.reject(error); //This is your response for failure
                });
            }
            return deferred.promise;
        };
    }]);
    

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-11-27
    • 1970-01-01
    • 2021-06-29
    • 1970-01-01
    • 2015-06-05
    • 2018-08-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多