web-dev-qa-db-ja.com

RxJSでオブザーバブルをチェーンする

私はRxJSとAngular 2を学んでいます。以前の結果に依存する複数の非同期関数呼び出しを持つpromiseチェーンがあるとします。

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

Promiseチェーンと同じ出力が生成されます。私の質問は

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

  2. この観察可能なチェーンを繰り返し実行するにはどうすればよいですか?つまり、最後に別のサブスクリプションを追加すると、さらに6が生成されますが、1、3、および6を印刷すると予想されます。

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

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

    1 3 6 6

52
Harindaka

約束の構成とRxjsについては、これはよく寄せられる質問なので、SOで以前に寄せられたいくつかの質問を参照できます。

基本的に、flatMapPromise.thenと同等です。

2番目の質問では、既に発行された値を再生しますか、それとも新しい値が到着したときに処理しますか?最初のケースでは、publishReplay演算子を確認します。 2番目のケースでは、標準サブスクリプションで十分です。ただし、風邪に注意する必要があります。あなたのソースに依存する対ホット二分法(cf. ホットおよびコールドオブザーバブル:「ホット」および「コールド」演算子はありますか? コンセプト)

41
user3743222