AngularJS推迟了承诺

时间:2016-02-01 22:31:53

标签: javascript angularjs

我在工厂得到了一个有效的$ http.POST请求,其工作是获取一个列表对象并将其返回。就像那样简单,除了对象属性我将它返回到只是长出腿和叶子。我将解释:

现在只是问题所在,其他一切似乎都正常工作

$scope.updateObj = function(num) {
    console.log("Obj before:\n" + JSON.stringify($scope.Obj));
    $scope.Obj.name = "Obj_" + num;
    $scope.Obj.list = myFactory.getList($scope.Obj.name);
    window.setTimeout(console.log("Obj after:\n" + JSON.stringify($scope.Obj)), 3000);
};

更新前的console.log显示myController.js中定义的对象,更新后的console.log具有正确的更新信息,但完全缺少list属性。

我设置了console.log在超时更新后检查Obj以查看请求是否需要更多时间,但我不认为它按预期工作。我认为这是一个异步问题,但我还是比较新的,而且我不太了解如何使用$ q服务。

tld; dr:我如何异步将response.data从$ http附加到对象属性?

myFactory.js

app.factory('myFactory', function($http) {
    var service = {};

    service.getList = function(name) {
        try {
            console.log("getting" + name);
            var temp = $http({
                method: 'POST',
                url: 'yourmom.com',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: {list: name},
                cache: true
            }).then(
                function success(response) {
                    alert(JSON.stringify(response.data.list)); // <- checks out & is exactly what I expect.
                    return response.data.list;
                },
                function error(response) {
                    throw error(response.status);
                }
            );
        }
        catch(err) {
            alert(err);
            return undefined;
        }
    };

    return service;
});

myController.js

app.controller('GUIcontroller', ['$scope', 'myFactory', 'networkFactory', function($scope, myFactory, networkFactory) {
    $scope.number = undefined;

    $scope.networkInit = networkFactory.init();
    $scope.Obj = {
        id: 0,
        name: "",
        list: {}
    };

    $scope.updateObj = function(num) {
        console.log("Obj before:\n" + JSON.stringify($scope.Obj));
        $scope.Obj.name = "Obj_" + num;
        $scope.Obj.list = myFactory.getList($scope.Obj.name);
        console.log("Obj after:\n" + JSON.stringify($scope.Obj));
    };
}]);

1 个答案:

答案 0 :(得分:1)

你需要以不同的方式思考承诺。承诺的主要好处是,无论是成功还是抛出错误,您都可以准确地得到结果。

这是一种建议的方式来做你想要实现的目标:

app.factory('myFactory', function($http) {
    var service = {};

    service.getList = function(name) {
        return $http({
                method: 'POST',
                url: 'yourmom.com',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: {list: name},
                cache: true
            });
    };

    return service;
});

app.controller('GUIcontroller', ['$scope', 'myFactory', 'networkFactory', function($scope, myFactory, networkFactory) {
    $scope.number = undefined;

    $scope.networkInit = networkFactory.init();
    $scope.Obj = {
        id: 0,
        name: "",
        list: {}
    };

    $scope.updateObj = function(num) {
        $scope.Obj.name = "Obj_" + num;
        myFactory.getList($scope.Obj.name).then(function(response) {
            $scope.Obj.list = response;
        }).catch(function(err) {
            console.error('Error fetching list: ', err);
        });
    };
}]);