Angular2 - コンポーネント内で非同期サービス呼び出し（http要求）をチェーンする方法

Question

私は最初に何かPOSTと呼ばれるサービスを呼び出す必要があるコンポーネントを持っています。その後、同じコンポーネントで、POSTが完了するまで待って、データを取得する別のサービスを呼び出します。

POST呼び出しが完了するまでGET呼び出しを待機させるにはどうすればよいですか？新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(); 

    ... 
} 

新しい-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)); 
} 

ありがとう！ 変更createNewVersionへ：

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

は、その後、あなたの呼び出しで：

Answer 1

あなたはこのように行うことができます

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

Answer 2

同じことを行う別の方法がnew-version.component.tsにsubscribeにあり、あなたGET呼び出しますPOSTリクエスト内でリクエストしてください。つまり、POSTリクエストが正しく行われているかどうかを確認してください。そうであれば POSTが正しく完了したら、GETリクエストを呼び出します。以下のように：新しい-version.component.tsで

：新しい-version.service.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.... 
       } 
      } 
     }); 
    ... 
} 

：

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

詳細はあなたがread hereできhttp要求に関連します。呼び出しはsomeFunc()の呼び出し側はまた、実行に時間の追加作業にチャンスを持っているので、

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

との通話は、あなたがそのチェーンのPromiseを返すreturnを持っていることを確認しPromiseチェーンを返し

Answer 3

doSomethingAfterThat()が完了した後。

呼び出しがObservableが再び観測可能と約束ミックスする方法を示すことthen()で連鎖され、最後eventとdoSomethingAfterThat()後に実行されるコールバックcomplete

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

doSomethingNext()を使用して返します。 doSomething()。

Answer 4

あなたが順序を達成するためにconcatすることができるはず、とreduceは、放出された値を収集するために：ここ

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

より良い使用switchMap()。

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

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

しかし、問題は、最初に解決されている前に、別のPOSTリクエストを行う場合、以前の要求がキャンセルされますとなります。