Javascript AngularJS：处理回调和承诺

我无法理解异步请求的概念

我的视图有一个控制器，它正在从提供程序创建对象实例：

va.controller('VaCtrl',function($scope,$shipment){
    $scope.shipment = $shipment.Shipment();    
});

提供者：

Shipment.provider('$shipment',function(){

    this.$get = function($http){

        function Shipment(){

        }

        Shipment.prototype.fetchShipment = function(){
            var shipment = undefined;
                $http.post('../sys/core/fetchShipment.php',{
                        // some data to POST
            }).then(function(promise){
                    shipment = promise.data;
                });

            return shipment;
        };

        return {
            Shipment: function(){
                return new Shipment();
            }
        }
    }
});

我的目标是从控制器内的

shipping.prototype.fetchShipping（）

访问数据。我的做法：

$scope.fetchShipment = function(){
       var shipment = $scope.shipment.fetchShipment();
        console.log(shipment); // undefined
};

但是，这将返回undefined

---

我读到有关$q的文章，并且延迟、承诺和回调，现在我就像WTF；我只想将检索到的数据推送到我的控制器，最好的方法是什么？

您应该修改代码，如下所示，直接从FetchShipping返回承诺，然后在控制器内使用then（）

Shipment.prototype.fetchShipment = function(){

    return $http.post('../sys/core/fetchShipment.php',{
        // some data to POST
    })
};


$scope.fetchShipment = function(){
    var shipment = $scope.shipment.fetchShipment().then(function(data){;
        console.log(data);
    });
};

对代码的解释：

调用$http将返回一个承诺，当您从服务器获取数据时，该承诺将得到解决。在上面的代码中，我从服务函数返回$http.post，该函数返回一个承诺。因此，在控制器中，您正在等待承诺得到解决，当承诺得到解决时，结果将记录到控制台

阅读更多有关angular的promise文档：

• .$q
• .$http

---

请举一个例子，说明如何让你的例子与你自己的承诺相一致。 如果使用$http builtin promise，会简单得多，因此这是一个$q示例：

angular.module('myApp', []).controller("myAppCtrl", function ($scope, $shipment) {
    $shipment.Shipment().fetchShipment().then(function (shipment) {
        $scope.shipment = shipment
    });
}).provider('$shipment', function () {
    this.$get = function ($http, $q) {

        function Shipment() {

        }

        Shipment.prototype.fetchShipment = function () {
            var defered = $q.defer();
            demodata = {name: "jan", id:8282};
            $http.post('/echo/json/', 'json=' + encodeURIComponent(angular.toJson(demodata)), {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                }
            }).then(function (response) {
                //resolve promise
                defered.resolve(response.data);
            });

            return defered.promise;
        };

        return {
            Shipment: function () {
                return new Shipment();
            }
        }
    }
});

<div ng-controller="myAppCtrl">{{shipment}}</div>

angular.module（'myApp'，[]）.controller（'myAppCtrl'，函数（$scope，$shipping）{
$Shipping.Shipping（）.FetchShipping（）.then（函数（装运）{
$scope.shipping=装运
});
}).provider（“$shipping”，函数（）{
这个。$get=函数（$http，$q）{
函数装运（）{
}
Shipping.prototype.FetchShipping=函数（）{
var defered=$q.defer（）；
解调器={name:“jan”，id:8282}；
$http.post（'/echo/json/'，'json='+encodeURIComponent（angular.toJson（demodata））{
标题：{
“内容类型”：“application/x-www-form-urlencoded；charset=UTF-8”
}
}).然后（功能（响应）{
//决心承诺
延迟。解析（响应。数据）；
});
延期归还。承诺；
};
返回{
装运：功能（）{
退回新货（）；
}
}
}
});
{{装运}

JSFIDLE（将JSFIDLE echo服务用作数据提供程序）：

有关承诺的更多信息：

---

stackoverflow.com/questions/15604196/…egghead.io/video/o84ryzNp36Q

天哪，我欠你一个人情。如果您有一个，我将非常感谢您提供进一步解释的链接，因为目前我知道这是可行的，但还不理解背后的概念。为什么您将$scope.fetchShipping设置为与prototype.fetchShipping同名？感谢您的努力。但这让我想到了一个问题，我更喜欢使用$q。在我的答案中添加了更多关于承诺的链接