☰

RxJS で 2 つの Observable を「待機」する方法 質問する

tag-icon • tag-icon javascript angular rxjs reactive-programming
RxJS で 2 つの Observable を「待機」する方法 質問する

私のアプリには次のようなものがあります:

this._personService.getName(id)
      .concat(this._documentService.getDocument())
      .subscribe((response) => {
                  console.log(response)
                  this.showForm()
       });

 //Output: 
 // [getnameResult]
 // [getDocumentResult]

 // I want:
 // [getnameResult][getDocumentResult]

すると、最初に_personService、次に の2 つの別々の結果が取得されます。 を呼び出して終了する前に、両方の結果を待機し、それぞれの結果を操作するには_documentServiceどうすればよいですか。this.showForm()

ベストアンサー1

最終更新日: 2022年3月。

RxJS v7: 最新の組み合わせ

reactXよりドキュメンテーション:

入力 Observable が値を発行するたびに、すべての入力からの最新の値を使用して数式を計算し、その数式の出力を発行します。

// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
    
name$.pipe(
        combineLatestWith($document)
      )
      .subscribe(([name, document]) => {
           this.name = name;
           this.document = pair.document;
           this.showForm();
       })

(非推奨) RxJS v6 combineLatest()

reactXよりドキュメンテーション:

入力 Observable が値を発行するたびに、すべての入力からの最新の値を使用して数式を計算し、その数式の出力を発行します。

(更新: 2021年2月):

// Deprecated (RxJS v6)
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
    
name$.combineLatest(document$, (name, document) => {name, document})
    .subscribe(pair => {
           this.name = pair.name;
           this.document = pair.document;
           this.showForm();
       })

(代替構文): 最新のものを結合(観測可能オブジェクト)

// Deprecated (RxJS v6)
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
    
combineLatest(name$, document$, (name, document) => ({name, document}))
    .subscribe(pair => {
           this.name = pair.name;
           this.document = pair.document;
           this.showForm();
       })

zip と combineLatest

(更新: 2018年10月)以前、私は 方式の使用を提案しましたzip。ただし、使用例によっては の方がcombineLatestよりもいくつかの利点がありますzip。したがって、違いを理解することが重要です。

CombineLatest観測可能なものから最新の放出値を出力する。zipメソッドは放出されたアイテムを順序注文。

例えば、観測可能オブジェクト#1が3位アイテムと観測可能物#2は5位アイテム。メソッドを使用した結果zipは3位両方の放出された値observables。

この状況では、結果combineLatestは5位そして3位. より自然に感じます。

Observable.zip(観測可能ファイル)

(元の回答: 2017 年 7 月)Observable.zipメソッドについては、ReactiveX ドキュメント:

複数の Observable を組み合わせて、各入力 Observable の値から順番に値が計算される Observable を作成します。

// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
    
Observable
    .zip(name$, document$, (name: string, document: string) => ({name, document}))
    .subscribe(pair => {
           this.name = pair.name;
           this.document = pair.document;
           this.showForm();
       })

補足（両方の方法に当てはまります）

関数を指定している最後のパラメータは(name: string, document: string) => ({name, document})オプションです。これをスキップすることも、より複雑な操作を行うこともできます。

最新のパラメータが関数の場合、この関数は入力値から作成された値を計算するために使用されます。それ以外の場合は、入力値の配列が返されます。

したがって、最後の部分をスキップすると、配列が得られます。

// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
    
Observable
    .zip(name$, document$)
    .subscribe(pair => {
           this.name = pair['0'];
           this.document = pair['1'];
           this.showForm();
       })

おすすめ記事