it-swarm.com.de

Angularjs mehrfache $ http.get Anfrage

Ich muss zwei $http.get - Aufrufe ausführen und die zurückgegebenen Antwortdaten zur weiteren Berechnung an meinen Service senden.

Ich möchte etwas wie das Folgende tun:

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

In meinem Markup nenne ich es wie

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

Da $http.get Asynchron ist, erhalte ich die Daten nicht, wenn ich die doCalculation -Methode übergebe.

Haben Sie eine Idee, wie ich mehrere $http.get - Anfragen implementieren und wie oben beschrieben arbeiten kann, um beide Antwortdaten in den Dienst zu stellen?

36
mushfiq

Was Sie brauchen, ist $q.all.

Hinzufügen $q zu den Abhängigkeiten des Controllers, dann versuchen Sie:

$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

Es gibt einen einfachen und verrückten Weg: Rufen Sie die Berechnung in beiden Rückrufen auf. Beim ersten Aufruf (je nachdem, was zuerst eintritt) werden unvollständige Daten angezeigt. Es sollte nichts anderes tun, als schnell zu beenden. Der zweite Aufruf sieht beide Produktlisten und erledigt den Job.

1
maaartinus

Ich hatte kürzlich ein ähnliches Problem, daher werde ich meine Antwort auch posten:

In Ihrem Fall haben Sie nur zwei Berechnungen und es scheint, dass diese Zahl nicht veränderbar ist.

Aber hey, dies kann in jedem Fall der Fall sein, wenn zwei oder mehr Anforderungen gleichzeitig ausgelöst werden.

Wenn ich zwei oder mehr Fälle betrachte, würde ich Folgendes implementieren:

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

In diesem Fall würde doCalculation gezwungen, stattdessen ein Array zu akzeptieren.

0
Rafael