web-dev-qa-db-ja.com

Angularjsの複数の$ http.getリクエスト

2つの$http.get呼び出しを行う必要があり、さらに計算を行うために、返された応答データをサービスに送信する必要があります。

私は次のようなことをしたい：

function productCalculationCtrl($scope, $http, MyService){
    $scope.calculate = function(query){

            $http.get('FIRSTRESTURL', {cache: false}).success(function(data){
                $scope.product_list_1 = data;
            });

            $http.get('SECONDRESTURL', {'cache': false}).success(function(data){
                $scope.product_list_2 = data;
            });
            $scope.results = MyService.doCalculation($scope.product_list_1, $scope.product_list_2);
        }
    }

私のマークアップでは、

<button class="btn" ng-click="calculate(query)">Calculate</button>

$http.getは非同期であるため、doCalculationメソッドを渡すときにデータを取得していません。

複数の$http.getリクエストを実装し、上記の実装のように動作して両方の応答データをサービスに渡すにはどうすればよいですか？

httpangularjsget
36
mushfiq

必要なのは$q.all。

追加 $qコントローラーの依存関係に、次に試してください：

$scope.product_list_1 = $http.get('FIRSTRESTURL', {cache: false});
$scope.product_list_2 = $http.get('SECONDRESTURL', {'cache': false});

$q.all([$scope.product_list_1, $scope.product_list_2]).then(function(values) {
    $scope.results = MyService.doCalculation(values[0], values[1]);
});
73
Ye Liu

簡単でハックな方法があります：両方のコールバックで計算を呼び出します。最初の呼び出し（どちらか早い方）で不完全なデータが表示されます。何もしないで、すぐに終了します。 2番目の呼び出しでは、両方の製品リストが表示され、ジョブが実行されます。

1
maaartinus

私は最近同様の問題を抱えていたので、答えも投稿します。

あなたの場合、計算は2つしかないので、この数値は変更可能ではないようです。

しかし、これは、一度に2つ以上の要求がトリガーされるケースの場合があります。

したがって、2つ以上のケースを考慮すると、これは私が実装する方法です：

var requests = [];
requests.Push($http.get('FIRSTRESTURL', {'cache': false}));
requests.Push($http.get('SECONDRESTURL', {'cache': false}));

$q.all(requests).then(function (responses) {
  var values = [];
  for (var x in responses) {
    responses[x].success(function(data){
      values.Push(data);
    });
  }
  $scope.results = MyService.doCalculation(values);
});

この場合、doCalculationが代わりに配列を受け入れるようにします。

0
Rafael