javascript - AngularJS 的延期 promise

Question

我在工厂中有一个有效的 $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:如何将 $http 中的 response.data 异步附加到对象属性？

<小时/>

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

Answer 1

你需要以不同的方式思考 Promise。使用 Promise 的主要好处是，无论成功还是抛出错误，您都可以在完成时准确地得到结果。

这是实现您想要实现的目标的建议方法:

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