AngularJS的延期承诺

AngularJS's deferred promises

本文关键字:承诺 AngularJS      更新时间:2023-09-26

我有一个工作$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);
};

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

我设置了控制台.log在超时更新后检查 Obj,以查看请求是否只需要更多时间,但我认为它没有按预期工作。我认为这是一个异步问题,但我仍然相当新手,并且我对如何使用$q服务没有很好的掌握。

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


我的工厂.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;
});

我的控制器.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));
    };
}]);

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

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

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