Warten auf das Ergebnis von 2 asynchronen API-Aufrufe vor dem Ausführen einer Operation

Question

Ich habe 2 asynchrone API-Aufrufe beim Laden der Seite ausgelöst. Ich summiere die Werte, die in jedem von ihnen zurückgegeben werden, und berechne dann ihre% Änderung. Also muss ich sicherstellen, dass jede API erfolgreich aufgerufen wurde und dass beide Variablen, die die Summen enthalten, vor der Berechnung der Differenz aufgefüllt wurden.

Was ich jetzt getan ist $watchGroup zu verwenden, um sowohl die Variablen zu beobachten und die Funktion aufrufen, wenn beide Variablen nicht null .Dieses mein Controller-Code ist:

module Controllers { 
    export class MyController { 
     static $inject = ["$scope",'$http']; 
     public TotalCurrent: any; 
     public TotalPrevious: any; 
     public diffPercent:any; 
     constructor(
      private $scope: ng.IScope, 
      private $http: ng.IHttpService, 
     ) { 
      this.$scope.$watchGroup(['myC.TotalCurrent', 'myC.TotalPrevious'], function (newVal, oldVal, scope) { 
       if (newVal[0] != oldVal[0] && newVal[1] != oldVal[1] && newVal[0] != null && newVal[1] != null) 
        scope.myC.diffPercent = scope.myC.GetDifferencePercent(newVal[0], newVal[1]); 
      }); 
       this.GetValuesFromAPI(); 
     } 


     public GetValuesFromAPI() { 
      this.TotalCurrent = null; 
      this.TotalPrevious= null; 


      this.$http.get("url1").then((result: any) => { 
       if (result.value.length > 0) { 
        var TempCurrentTotal = 0; 
        for (var i = 0; i < result.value.length; i++) { 
         TempCurrentTotal += result.value[i].Val; 
        } 
        this.TotalCurrent = TempCurrentTotal; 
       } 

      }); 

      this.$http.get("url2").then((result: any) => { 
        if (result.value.length > 0) { 
         var TempPreviousTotal = 0; 
         for (var i = 0; i < result.value.length; i++) { 
          TempPreviousTotal += result.value[i].Val; 
         } 
         this.TotalPrevious= TempPreviousTotal; 
        } 
       }) 
     } 

     public GetDifferencePercent(current:any, last:any){ 
      var percentage = ((Math.abs(current - last)/last) * 100).toFixed(2); 
      return percentage; 
     } 
    } 
} 

Das ist für jetzt gut funktioniert. Allerdings habe ich mich gefragt, ob es eine Möglichkeit gibt, dies zu erreichen, ohne sich Sorgen um die Performance-Probleme $watchGroup zu machen, da die Anzahl der API-Aufrufe in Zukunft wahrscheinlich zunehmen wird und meine Seite mehrere andere Variablen auf $watch hat. Ich überlegte, die API-Aufrufe mit zu verketten, aber jede API hat eine signifikant große Antwortzeit und eine Verkettung würde auch die Seite verlangsamen. Irgendwelche Vorschläge?

Answer 1

Haben Sie darüber nachgedacht, sie parallel zu starten?

können Sie $q wie folgt verwenden:

const promise1 = this.$http.get("url1"); 
const promise2 = this.$http.get("url2"); 

this.$q.all([promise1, promise2]).then(results => { 
    // results[0] is the result of the first promise, results[1] of the second. 
}); 

Sie können $ q-Dienst in Ihrem Klassenkonstruktors injizieren.

Callback wird aufgerufen, wenn beide Versprechungen abgeschlossen sind. Sie können auch nach Fehlern suchen, wenn Sie es brauchen, nur einen Haken anhängen.