web-dev-qa-db-ja.com

RxJs Observablesのネストされたサブスクリプション？

次のコード例のようなものを単純化する方法は何ですか？適切な演算子が見つかりません..簡単な例を挙げることができますか？

this.returnsObservable1(...)
  .subscribe(

    success => {

      this.returnsObservable2(...)
        .subscribe(

          success => {

            this.returnsObservable3(...)
              .subscribe(

                success => {
                   ...
                },
rxjsobservablesubscribe
17
Max Solid

コメントで述べたように、flatMap演算子を探しています。

以前の回答で詳細を見つけることができます：

あなたの例は次のようになります：

this.returnsObservable1(...)
  .flatMap(success => this.returnsObservable2(...))
  .flatMap(success => this.returnsObservable3(...))
  .subscribe(success => {(...)});
18
user3743222

RxJS 5で以前に回答しましたが、6を使用しながらこのページに行きました。

あなたも6を使用している場合（そして今までになっているはずです）、flatmapをpipe内で 演算子 として使用できます。

@ user3743222のサンプルコードを変更しました。

this.returnsObservable1(...)
  .pipe(
    flatMap(success => this.returnsObservable2(...)),
    flatMap(success => this.returnsObservable3(...))
  )
  .subscribe(success => {(...)});
12
Mathijs Segers

SwitchMap演算子も役立ちます。ネストされたサブスクリプションと比較したswitchMapの有用性を説明するいくつかの例は、ここにあります。

  1. ネストされたサブスクリプションの状況

このcodepenはデモを提供します： https://codepen.io/anon/pen/zdXBvP?editors=1111

Rx.Observable
  .interval(5000)
  .subscribe((val) => {
    console.log("outer:", val);
    Rx.Observable
      .interval(1000)
      .subscribe((ival) => {
        console.log("inner:", val, ival); 
      });
  });
  1. switchMapを使用した状況

このcodepenはデモを提供します： https://codepen.io/anon/pen/xLeOZW?editors=1111

Rx.Observable
  .interval(5000)
  .switchMap((val) => {
    console.log("outer:", val);
    return Rx.Observable.interval(1000).map((ival) => [val, ival]);
  })
  .subscribe((val) => {
    console.log("inner:", val[0], val[1]);
  });
6
sdec