4

非同期リクエストの概念に頭を悩ませることができません。

プロバイダーからオブジェクト インスタンスを作成するビュー用のコントローラーがあります。

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

Shipment.prototype.fetchShipment()私の目標は、コントローラー内からデータにアクセスすることです。私のアプローチ：

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

ただし、これは undefined を返します。

私は $q と defers、promise、callbacks について読みましたが、今では WTF のようです。私がやりたいのは、取得したデータをコントローラーにプッシュすることだけです。これを行うための最良の方法は何ですか?

4

2 に答える 2

5

次のようにコードを変更して、fetchshipment から直接 promise を返し、コントローラー内で 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 を呼び出すと、サーバーからデータを取得するときに解決される promise が返されます。上記のコードでは、Promise を返すサービス関数から $http.post を返しています。したがって、コントローラーでは promise が解決されるのを待っており、promise が解決されると、結果がコンソールに記録されます。

angular に関するより多くの promise ドキュメントについて読んでください。

于 2013-07-23T09:27:20.950 に答える
4

あなた自身の約束であなたの例を動作させる方法の例を挙げてください。$http 組み込みの 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>

JSFiddle (JSFiddle エコー サービスをデータ プロバイダーとして使用): http://jsfiddle.net/alfrescian/ayke2/

プロミスの詳細:

http://blog.parse.com/2013/01/29/whats-so-great-about-javascript-promises/ http://www.egghead.io/video/o84ryzNp36Q AngularJS : promise を使用する場所は? stackoverflow.com/questions/15604196/… Egghead.io/video/o84ryzNp36Q

于 2013-07-23T10:18:19.297 に答える