Angular2 - Wie verkettet man asynchrone Serviceaufrufe (http Anfragen) in einer Komponente?

Question

Ich habe eine Komponente, die zuerst einen Dienst, der etwas POST aufrufen muss. Dann möchte ich in derselben Komponente warten, bis der POST fertig ist, um einen anderen Dienst anzurufen, der Daten abholt.

Wie kann ich den GET-Anruf warten, bis der POST-Anruf beendet wird?

In neuen version.component.ts:

private createNewVersion(value) { 
    ... 

    // create new version, then call on all available versions 

    // POST call 
    this._newVersionService.createNewVersion(vnr); 

    // GET call 
    this._versionService.getAvailableVersions(); 

    ... 
} 

In neuen version.service.ts:

export class NewVersionService { 

response$: Subject<any>; 

constructor(private _http: Http) { 
    this.response$ = new BehaviorSubject<any>(null); 
} 

public createNewVersion(versionNr) {  
    this._http.post('http://localhost:8080/services/' + versionNr, null, { 
     method: 'POST', 
    }) 
    .subscribe(response => { 
     this.response$.next(response.status); 
    }, 
    error => console.error(error)); 
} 

Dank!

Answer 1

Sie können wie folgt tun: ändern createNewVersion zu:

public createNewVersion(versionNr) { 
return this._http.post('http://localhost:8080/nod_inspection_plugin/services/' + versionNr, null, { 
    method: 'POST', 
}); 
} 

Dann in Ihren Anruf:

this._newVersionService.createNewVersion(vnr).subscribe(response=> { 
this._versionService.getAvailableVersions(); 
}, error => console.error(error)); 

Answer 2

Eine andere Möglichkeit, das gleiche zu tun ist, um subscribe im new-version.component.ts und rufen Sie GET Anfrage von innerhalb der POST Anfrage, dh überprüfen Sie, ob Ihre POST Anfrage korrekt ist oder nicht wenn ja POST ist richtig gemacht, dann rufen Sie GET Anfrage. Wie weiter unten:

In neuen version.component.ts:

private createNewVersion(value) { 
    ... 
    // create new version, then call on all available versions 

    // POST call 
    this._newVersionService.createNewVersion(vnr) 
     .subscribe((res) => { 
      if(res){ 
       console.log(res); 
       if (---Post request done properly check via status or something else here----{ 
        CALL YOUR GET REQUEST HERE..... 
        // GET call 
        this._versionService.getAvailableVersions(); 
       } 
       else { 
        DO something else whatever you want.... 
       } 
      } 
     }); 
    ... 
} 

In neuen version.service.ts:

export class NewVersionService { 

response$: Subject<any>; 

constructor(private _http: Http) { 
    this.response$ = new BehaviorSubject<any>(null); 
} 

public createNewVersion(versionNr) {  
    this._http.post('http://localhost:8080/nod_inspection_plugin/services/' + versionNr, null, { 
     method: 'POST', 
    }) 
    .map(response => { 
     return [{status: response.status, json: response.json()}]; 
    }, 
    error => console.error(error)); 
} 

für weitere Informationen zu http Anfrage bezogen Sie read here können.

Answer 3

Wenn ein Aufruf gibt eine Promise Kette, die Anrufe mit

someFunction() { 
    return returnsPromise() 
    .then(result => doSomethingNext()) 
    .then(result => doSomethingAfterThat()); 
} 

Sie return Stellen Sie sicher, die die Promise dieser Kette gibt so der Anrufer von someFunc() auch eine Chance zu Zeit zusätzliche Arbeit auszuführen hat nach doSomethingAfterThat() ist abgeschlossen.

Wenn ein Aufruf liefert ein Observable dann den complete Rückruf verwendet

someFunction() { 
    return returnsObservable() 
    .subscribe(
     event => doForEachEvent(), 
     error => handleError(), 
    () => doSomethingNext() 
      .then(result => doSomethingAfterThat()); 
} 

doSomethingNext() nach den letzten event ausgeführt wird und doSomethingAfterThat() wieder mit then() gekettet ist zu zeigen, wie beobachtbar und Versprechen zu mischen. doSomething().

Answer 4

sollten Sie in der Lage sein, um concat Sequenz zu erreichen, und reduce die emittierten Werte zu sammeln:

var a = this._newVersionService.createNewVersion(vnr); 
var b = this._versionService.getAvailableVersions(); 

Rx.Observable.concat(a, b).reduce((acc:Array<any>, x:any) => { 
    acc.push(x); return acc; 
}, []).subscribe(t=> { 
     var firstEmitted = t[0]; 
     var secondEmitted = t[1]; 
}); 

Answer 5

Bessere Nutzung switchMap() hier.

const versions$ = this._newVersionService.createNewVersion(vnr) 
       .switchMap(response => this._versionService.getAvailableVersions()); 

versions$.subscribe(response2 => this.versions = response2) 

Aber das Problem wird sein, wenn Sie einen anderen POST-Anforderung, bevor erste, wird die vorherige aufgelöst wurde Anfrage storniert.