Angular2 - Come concatenare chiamate di servizio asincrona (richieste http) in un componente?

Question

Ho un componente che deve prima chiamare un servizio che POST qualcosa. Quindi nello stesso componente voglio attendere fino al termine del POST, per chiamare un altro servizio che recupera i dati.

Come posso fare in modo che la chiamata GET attenda che la chiamata POST termini?

in New-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 New-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)); 
} 

Grazie!

Answer 1

Si può fare in questo modo: Modifica createNewVersion a:

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

Poi nella chiamata:

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

Answer 2

Un altro modo per fare la stessa cosa è di subscribe nel new-version.component.ts e si chiamano GET richiesta dall'interno della richiesta POST ovvero verificare se la richiesta POST è stata eseguita correttamente o meno se sì POST è fatto correttamente quindi ti chiama richiesta GET. Come di seguito:

in New-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 New-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)); 
} 

per ulteriori informazioni relative al http richiesta è possibile read here.

Answer 3

Quando una chiamata restituisce una catena Promise le chiamate con

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

assicurare di avere un return che restituisce il Promise di quella catena in modo che il chiamante di someFunc() ha anche la possibilità di tempo di lavoro aggiuntivo per l'esecuzione dopo che doSomethingAfterThat() è stato completato.

Quando una chiamata restituisce un Observable quindi utilizzare il complete callback

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

doSomethingNext() viene eseguito dopo l'ultimo event e doSomethingAfterThat() è di nuovo incatenato con then() per mostrare come mescolare osservabile e la promessa. doSomething().

Answer 4

si dovrebbe essere in grado di concat di raggiungere sequenza e reduce per raccogliere i valori emessi:

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

Migliore utilizzo switchMap() qui.

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

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

Ma il problema sarà se si effettua un'altra richiesta POST prima del primo è stato risolto, la richiesta precedente otterrà cancellato.