web-dev-qa-db-ja.com

Angular2-コンポーネントで非同期サービス呼び出し（httpリクエスト）をチェーンする方法は？

最初にPOST何かであるサービスを呼び出す必要があるコンポーネントがあります。次に、同じコンポーネントでPOSTが完了するまで待って、データを取得する別のサービス。

POST呼び出しが終了するまでGET呼び出しを待機させるにはどうすればよいですか？

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

    ...
}

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

ありがとう！

httpasynchronousangularchaining
10
Sojye

呼び出しがPromiseチェーンを返すとき、呼び出しは

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

そのチェーンのreturnを返すPromiseがあることを確認してください。someFunc()の呼び出し元にも、doSomethingAfterThat()の後に実行する追加の作業の時間を計る機会があります。完了しました。

呼び出しがObservableを返す場合、completeコールバックを使用します

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

doSomethingNext()は最後のeventの後に実行され、doSomethingAfterThat()は再びthen()とチェーンされて、オブザーバブルとプロミスを混合する方法を示します。 doSomething()。

5
Günter Zöchbauer

シーケンスを実現するには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];
});
1
pixelbits

次のように実行できます。createNewVersionを次のように変更します。

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

その後、あなたの電話で：

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

同じことを行う別の方法は、new-version.component.tsでsubscribeを実行し、GETリクエスト内からPOSTリクエストを呼び出すことです。つまり、POST要求は正しく行われるかどうかはいPOSTが正しく行われたら、GET要求を呼び出します。以下のように：

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

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

httpリクエストに関連する詳細については、 ここを読む を使用できます。

0
Pardeep Jain

ここではswitchMap()を使用することをお勧めします。

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

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

しかし、問題は、最初に解決される前に別のPOST=要求を行うと、前の要求がキャンセルされることになります。

0
ritz078