2016-12-26 7 views
1

Ich arbeite an einem Szenario, wo auf der Seite laden ich 2 $http.get() Anfrage haben. Ein $http.get() sind unabhängig von einem anderen $http.get(). Alles funktioniert gut. Aber in einigen Situationen wird meine 2. $http.get() Anfrage vor der 1. $http.get() ausgeführt und ich bin nicht in der Lage, die gewünschte Ausgabe zu bekommen. Wie können wir die Anfrage ketten? Da ich neu bei AngularJS bin, habe ich nicht viel Ahnung.

$scope.onload = function() 
{ 
    var responsePromise1 = $http.get(1st rest call); 
    responsePromise1.success(function(data) { 

     console.log(data.platform.record); 
     $scope.records=data.platform.record; 
    }); 

    responsePromise1.error(function(data, status, headers, config) { 
     alert("ajax failed"); 
    }); 

    var responsePromise2 = $http.get(2nd rest call); 
    responsePromise2.success(function(data2) { 
     console.log(data2.platform.record); 
     $scope.records2=data2.platform.record; 
    }); 

    responsePromise2.error(function(data2, status, headers, config) { 
     alert("ajax failed"); 
    }); 
} 
$scope.butto = function(datafrom1st,datafrom2nd) 
{ 
    var responsePromise3 = $http.get(3rd rest call); 
    responsePromise3.success(function(data3) { 
     console.log(data3.platform.record); 
     $scope.records3=data3.platform.record; 
    }); 

    responsePromise1.error(function(data3, status, headers, config) { 
     alert("ajax failed"); 
    }); 
} 
<body> 
    <div ng-init="onload()"> 
    <div ng-repeat="record in records"> 
     {{record.id}} 
    </div> 
    <div ng-repeat="record2 in records2"> 
     {{record2.name}} 
    </div> 
    <button type="button" class="btn btn-primary btn-sm ng-cloak" 
      style="padding-bottom:25px;font-weight:bold;" 
      ng-init="butto(record.id,record2.name)"> 
     {{record3.data}} 
    </button> 
    </div> 
</body> 
+0

Ihre 'responsePromise1' wird vor' responsePromise2' ausgeführt, aber sie sind beide asynchron Call, was bedeutet, dass wir nicht garantieren können, wer zuerst fertig wird. Wenn Sie die Anfrage verketten müssen, muss Ihre 'responsePromise2' innerhalb des' sucess' von 'responsePromise1' liegen. – Hereblur

+0

Wenn sie unabhängig sind, sollten Sie sie nicht verketten. –

+0

Wenn sie voneinander unabhängig sind, verwenden Sie eine Promise All. Im 'then' Callback wird es beide Antworten haben. – Hoyen

Antwort

0

Anruf 2. Anfrage innerhalb Erfolg Methode der ersten Anfrage:

var responsePromise1 = $http.get(1st rest call); 
     responsePromise1.success(function(data) 
     { 
      console.log(data.platform.record); 
      $scope.records=data.platform.record; 
var responsePromise2 = $http.get(2nd rest call); 
     responsePromise2.success(function(data2) 
     { 
     console.log(data2.platform.record); 
     $scope.records2=data2.platform.record; 
     }); 
     responsePromise2.error(function(data2, status, headers, config) 
     { 
      alert("ajax 2 failed"); 
     }); 
     }); 
     responsePromise1.error(function(data, status, headers, config) 
     {alert("ajax failed"); 
     }); 
+0

bro aber ich benutze 2 ng-init.One wenn für die erste Anfrage und andere für die zweite Anfrage – dockerrrr

+0

was meinst du? –

+0

Ich habe 2 verschiedene Funktionen. – dockerrrr

0

Die $ http-API auf den latenten/Versprechen APIs durch die $ q Dienst ausgesetzt basiert.

1

Sie können versuchen, Promise.all zu verwenden, wenn sie unabhängig voneinander sind. Aber Sie müssen den Code in einer bestimmten Reihenfolge ausführen.

var responsePromise1 = $http.get(1st rest call); 
var responsePromise2 = $http.get(2nd rest call); 
var promises = [responsePromise1,responsePromise2] 

// Array of Promises 
$q.all(promises) 
    .then(function(data){ 
     var data1 = data[0]; 
     var data2 = data[1]; 
     // Put logic here to handle both responses. 
     return $http.get(3rd rest call); 
    }) 
    .then(function(data3){ 
     // Put logic here to handle third response 
    }); 
+0

können Sie mehr über $ q.all (Versprechen) – dockerrrr

+0

'$ q.all ([])' gibt eine Zusage, die löst, wenn alle Versprechen, die an sie weitergegeben haben, gelöst haben.In diesem Fall wird also die Funktion in 'then' aufgerufen, wenn sowohl 'responsePromise1' als auch' responsePromise2' erfolgreich aufgelöst wurden. Wenn eine der bestandenen Versprechungen fehlschlägt/abgelehnt wird, wird das "$ q.all" sofort zurückgewiesen. Wenn 'responsePromise1' und' responsePromise2' wirklich unabhängig sind, bin ich mir nicht sicher, ob Sie das wollen, denn wenn einer fehlschlägt, dann scheitert auch der andere. –

+0

bro ich habe 3 $ http.get(). Ich möchte die Ausgabe der ersten beiden in der 3. Anfrage übergeben – dockerrrr

0

Versuchen Sie dies tun

$scope.onload = function() 
    { 
    var responsePromise1 = $http.get(1st rest call); 
     responsePromise1.success(function(data) { 
    SecondInit() 
     console.log(data.platform.record); 
      $scope.records=data.platform.record; 
     }); 

     responsePromise1.error(function(data, status, headers, config) { 
      alert("ajax failed"); 
     }); 


     } 
    function SecondInit(){ 
    var responsePromise2 = $http.get(2nd rest call); 
     responsePromise2.success(function(data2) { 
      console.log(data2.platform.record); 
      $scope.records2=data2.platform.record; 
     }); 

     responsePromise2.error(function(data2, status, headers, config) { 
      alert("ajax failed"); 
     }); 

Hier versuche ich, die zweite API-Aufruf zu binden namens SecondInit() funktionieren und in der es auf den Erfolg der ersten API-Aufruf aufrufen dies helfen könnte

0

Sie können dies erreichen, $q.all gemäß Hoyen Vorschlag mit:

$scope.onload = function(){ 

    var promise1 = $http.get('/request1'); 
    var promise2 = $http.get('/request2'); 

    $q.all([ promise1, promise2 ]).then(function(data){ 
     var response1 = data[0].platform.record; 
     var response2 = data[1].platform.record; 

     $scope.records = response1.map(function(e, i){ 
      var id = e.id; 
      var name = response2[i].name; 
      return {id: id, name: name}; 
     }); 
    }); 
}; 

Dann Ihre Ansicht nach tun:

<body> 
    <div ng-init="onload()"> 
     <div ng-repeat="record in records"> 
      <div>{{record.id}}</div> 
      <div>{{record.name}}</div> 
      <button type="button" class="btn btn-primary btn-sm ng-cloak" style="padding-bottom:25px;font-weight:bold;" 
       ng-click="butto(record.id,record.name)"></button> 
     </div> 
    </div> 
</body> 

Dies sollte funktionieren, aber ich würde wirklich empfehlen, finden Sie einen guten up-to-date Winkel Tutorial und lesen Sie über die besten Praktiken auf. Dies ist nicht wirklich der optimale Weg, um diese Art von Problem zu lösen.

Verwandte Themen