angular2 2 async-Aufruf

Question

Angular2, Typoskript

Ich habe eine Komponente, die 1 Objekt auf einmal vom Server anzeigt.

Auf das Klicken einer Schaltfläche führt das Formular eine Aktion für das Objekt aus, sendet Daten an den Server. In der nächsten Zeile wird sofort das nächste Objekt angezeigt.

this.rawS.updateTags({......}); //Update object 
this.candidateC.footerNavigateTo(.....);//Get next object 

Aber es gibt eine Race-Bedingung, wo Ajax nächstes Objekt erreicht den Server zu erhalten, bevor die updateTags Ajax den Server erreicht.

Code of updateTags ist

updateTags(rawCandidate) { 
    this.baseAjaxService.doPost(this.baseUrl + 'tags/update', rawCandidate) 
     .subscribe(data => { 
     console.log(data); 
     }); 
    } 

-Code für doPost ist

doPost(url, inputParamJSON){ 
    let httpResponse = this.http 
     .post(url, inputParamJSON, this.options) 
     .map(this.extractData) 
     .catch(this.handleAjaxError); 
    return httpResponse; 
} 

Die Route für 'continue_screening' eine Route Resolver hat, die das nächste Objekt bringt.

Wie kann ich sicherstellen, dass footerNavigateTo() erst ausgeführt wird, nachdem UpdateTags den vollständigen Zyklus abgeschlossen hat?

Answer 1

Wenn das, was Sie wollen, ist ein unterschiedliches Verhalten zu haben, je nachdem, wo die Funktion updateTags(rawCandidate) genannt wird, schlage ich folgende Lösung:

updateTags(rawCandidate, action) { 
    this.baseAjaxService.doPost(this.baseUrl + 'tags/update', rawCandidate) 
     .subscribe(
     data => { 
     action(data); 

     }, 
     error => { 
      console.log("error"); //handle error here 
     }); 
    } 

Dann können Sie die Funktion wie folgt aufrufen:

updateTags(rawCandidate, function(data){ 
    console.log(data); 
    this.candidateC.footerNavigateTo(.....);//here you can use data 
}); 

Answer 2

Was Sie hier erreichen wollen, ist, Ihre zwei HTTP-Aufrufe zu verketten, sie irgendwie abhängig zu machen. In Angular 1.X würde dies unter Verwendung von Versprechen gemacht werden, aber mit AngularJS 2 können Sie dies unter Verwendung von flatMap erreichen.

Siehe diesen Link http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http um Abhängige Anrufe Abschnitt.

PS: Wie in diesem Post (Combining promises in Angular 2) angegeben, können Sie auch toPromise() verwenden, um Ihr Observable (d. H. Ihren asynchronen http-Aufruf) in ein Versprechen umzuwandeln, wenn Sie damit vertraut sind.