Machen Sie Synchron http Anfragen mit Observables

Question

Ich arbeite an Winkel 2 Projekt. Ich muss n Nummer http Requests machen. Aber ich muss warten, um die Daten von vorheriger Anfrage zu erhalten, um nächste Anfrage zu machen.

Wie kann ich dies mit Observables erreichen.

ich tue:

_.forEach(data, (path) => { 
     this.userService.getTreeNodes(path.id) 
      .subscribe(
      data => { 
       //do something 
      } 
     ); 
     }); 

So jetzt, drei ZEITIGEN Anfragen gehen.

Answer 1

flatMap - Operator ist das Schlüsselwort, das Ihnen hilft, Ihr Problem zu lösen.

flatMap behandelt Abhängigkeiten zwischen Observablen. Meine Stichprobe ist erfunden, aber ich gebe einen Wert von der ersten Beobachtungsstelle zurück, die von der zweiten Beobachtungsstelle benötigt wird, um eine Summe zu berechnen.

Wie ich schon sagte, dieses Beispiel ist erfunden, aber wenn wir das mit Versprechen vergleichen, dann ist flatMap die Art und Weise, wie wir das Äquivalent von Versprechensketten erzeugen würden. Der Code kann unten gesehen werden.

let first = Observable.of(10); 
first.flatMap((operand1) => { 
    return Observable.of(operand1 + 10); 
}) 
.subscribe(res => this.flatMappedStreams = {msg: '10 + 10 = ' + res}); 

Quelle von http://www.syntaxsuccess.com/viewarticle/combining-multiple-rxjs-streams-in-angular-2.0

Answer 2

Hier ist ein Beispiel für eine Login-Funktion ist, die zuerst eine accessToken von Facebook bekommt, sendet dann das Token an einen zweiten Dienst das Benutzerprofil zu erhalten.

login(): Observable<any> { 

let fas: FacebookAuthResponse = { 
    accessToken: null, 
    expiresIn: null, 
    signedRequest: null, 
    userID: null, 
}; 

let fbResponse: Subject<any> = new Subject(); 
let userProfile: Subject<any> = new Subject(); 

this.fb.login().then((response: FacebookLoginResponse) => { 
    fbResponse.next(response.authResponse); 
    }), (error: any) => { 
    console.error(error); 
}; 

fbResponse 
    .map((far: FacebookAuthResponse) => far.accessToken) 
    .mergeMap(accessToken => this.processLogin(accessToken)) 
    .subscribe(res => userProfile.next(res)); 

return userProfile 

}

processLogin (Token) {

let headers = new Headers({ 'Authorization': 'Bearer facebook ' + token }); 
let options = new RequestOptions({ headers: headers }); 

return this.http.get('http://localhost:8000/user-profile/', options) 

}

Hier verwende ich rxjs beobachtbar und rxjs Gegenstand. Ich würde empfehlen, diesen Artikel lesen: http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

fbResponse.next(response.authResponse); 

Wenn this.fb.login behoben ist, rufen Sie als nächstes auf dem fbResponse Vorbehaltlich weiterer Prozess der fb.login Antwort.

.map((far: FacebookAuthResponse) => far.accessToken) 

Hier Karte wird verwendet, um den AccessToken von der fbLogin Antwort zu erhalten.

Was als nächstes passiert, ist nicht Teil Ihrer Frage, könnte aber interessant sein.

.mergeMap(accessToken => this.processLogin(accessToken)) 
.subscribe(res => userProfile.next(res)); 

mergeMap wir uns zum letzten Anruf in der Anforderungskette subsribe, und diesen Wert zurück.

Wenn wir diese Anmeldeanforderung abonnieren, wird das Benutzerprofil vom letzten Aufruf zurückgegeben, wenn alle Anforderungen synchron ausgeführt werden.