1. ホーム
  2. javascript

RxJSにおけるObservableのチェーン化

2023-10-25 19:32:24

質問

私はRxJSとAngular 2を学んでいます。私は前のものの結果に依存する複数の非同期関数呼び出しを持つプロミスチェーンを持っているとしましょう、それは次のようになります。

var promiseChain = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
}).then((result) => {
  console.log(result);

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(result + 2);
    }, 1000);
  });
}).then((result) => {
  console.log(result);

  return new Promise((resolve, reject) => {
      setTimeout(() => {
      resolve(result + 3);
        }, 1000);
  });
});

promiseChain.then((finalResult) => {
  console.log(finalResult);
});

プロミスを使わずにRxJSだけで同じことをしようとすると、次のような結果になりました。

var observableChain = Observable.create((observer) => {
  setTimeout(() => {
    observer.next(1);
    observer.complete();
  }, 1000);
}).flatMap((result) => {
  console.log(result);

  return Observable.create((observer) => {
    setTimeout(() => {
      observer.next(result + 2);
      observer.complete()
    }, 1000);
  });
}).flatMap((result) => {
  console.log(result);

  return Observable.create((observer) => {
    setTimeout(() => {
      observer.next(result + 3);
      observer.complete()
    }, 1000);
  });
});

observableChain.subscribe((finalResult) => {
  console.log(finalResult);
});

プロミスチェーンと同じ出力が得られます。私の疑問は

  1. 私はこれを正しく行っていますか?上記のコードにRxJS関連の改善点はありますか?

  2. 例えば、最後に別の購読を追加すると、1、3、6を表示することを期待しますが、追加の6を生成するだけです。

    observableChain.subscribe((finalResult) => {) console.log(finalResult)。 });

    observableChain.subscribe((finalResult)=>){。 console.log(finalResult)を実行します。 });

    1 3 6 6

どのように解決するのですか?

プロミスの構成とRxjsの比較についてですが、よくある質問なので、SOの過去の質問集を参照してください。

基本的には flatMap と同じです。 Promise.then .

2つ目の質問については、すでに発信された値を再生したいのか、それとも新しい値が到着したときに処理したいのか?最初のケースでは publishReplay 演算子をチェックしてください。2番目のケースでは、標準的なサブスクリプションで十分です。しかし、ソースによっては、cold.vs hot の二項対立に注意する必要があるかもしれません (cf. ホットとコールドの観測値 : 'ホット'と'コールド'オペレータはありますか? を参照してください)。