web-dev-qa-db-fra.com

Angularjs multiple $ http.get demande

J'ai besoin de faire deux $http.get appelez et je dois envoyer les données de réponse retournées à mon service pour effectuer un calcul supplémentaire.

Je veux faire quelque chose comme ci-dessous:

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

Dans mon balisage, je l'appelle comme

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

Comme $http.get est asynchrone, je n'obtiens pas les données lors du passage dans la méthode doCalculation.

Toute idée comment puis-je implémenter plusieurs $http.get demander et travailler comme l'implémentation ci-dessus pour transmettre les données de réponse en service?

httpangularjsget
36
mushfiq

Ce dont vous avez besoin est $q.all.

Ajouter $q aux dépendances du contrôleur, puis essayez:

$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

Il existe une méthode simple et hacky: appelez le calcul dans les deux rappels. La première invocation (selon la première éventualité) voit des données incomplètes. Il ne doit rien faire mais quitter rapidement. La deuxième invocation voit les deux listes de produits et fait le travail.

1
maaartinus

J'ai eu un problème similaire récemment, donc je vais également poster ma réponse:

Dans votre cas, vous n'avez que deux calculs et il semble que ce nombre ne soit pas modifiable.

Mais bon, cela pourrait être dans tous les cas avec deux ou plusieurs demandes déclenchées en même temps.

Donc, en considérant deux ou plusieurs cas, voici comment je mettrais en œuvre:

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

Ce qui, dans ce cas, forcerait doCalculation à accepter un tableau à la place.

0
Rafael