rxjsでasObservable()を使用するのはいつですか?


88

私は何の用途があるのだろうかと思っていますasObservable

ドキュメントによると:

ソースシーケンスのアイデンティティを隠す観察可能なシーケンス。

しかし、なぜシーケンスを非表示にする必要があるのでしょうか。

回答:


189

Subject.prototype.asObservable()を使用する場合

これの目的は、APIからサブジェクトの「オブザーバー側」がリークするのを防ぐことです。基本的に、結果のオブザーバブルに人々が「次へ」アクセスできるようにしたくない場合に、リークのある抽象化を防ぐためです。

(注:これは、実際には、このようなデータソースをObservableにする方法ではなく、new Observableコンストラクターを使用する必要があります。以下を参照してください)。

const myAPI = {
  getData: () => {
    const subject = new Subject();
    const source = new SomeWeirdDataSource();
    source.onMessage = (data) => subject.next({ type: 'message', data });
    source.onOtherMessage = (data) => subject.next({ type: 'othermessage', data });
    return subject.asObservable();
  }
};

今、誰かが観察可能な結果を​​得るとき、myAPI.getData()彼らは結果を評価することができませんnext

const result = myAPI.getData();
result.next('LOL hax!'); // throws an error because `next` doesn't exist

new Observable()ただし、通常は使用する必要があります

上記の例では、おそらく意図しないものを作成しています。1つは、getData()ほとんどのオブザーバブルのように怠惰ではなく、基礎となるデータソースSomeWeirdDataSource(およびおそらくいくつかの副作用)をすぐに作成することです。これは、あなたretryまたはrepeat結果として得られるオブザーバブルが、あなたが思っているように機能しないことも意味します。

次のように、データソースの作成をオブザーバブル内にカプセル化することをお勧めします。

const myAPI = {
  getData: () => return new Observable(subscriber => {
    const source = new SomeWeirdDataSource();
    source.onMessage = (data) => subscriber.next({ type: 'message', data });
    source.onOtherMessage = (data) => subscriber.next({ type: 'othermessage', data });
    return () => {
      // Even better, now we can tear down the data source for cancellation!
      source.destroy();
    };
  });
}

上記のコードを使用すると、RxJSの既存の演算子を使用して、オブザーバブルの上に「怠惰ではない」ようにするなどの動作を構成できます。


3
TXベンは... RX上のすべての素晴らしいサポートのために自分のもの... TXを追って
born2net

3
@Shardul ...結果をサブスクライブします:result.subscribe(value => doSomething(value))
Ben Lesh

2
@BenTaliadorosはい、毎回return subject.asObservable();新しい観測量になります。単一のSubjectメンバー変数があり、onMessage / onOtherMessageは条件で、または初期化時に(すべての呼び出しではなく)宣言されます。関数にpipe( filter() )提供されたパラメーターに基づいて、そのアプローチを使用しましたgetData()
Drenai

5
@BenLesh、2番目のコードサンプルにされるsubjectことになってsubscriber
フローリン

1
ここでも確認をお願いします:subject.next行がsubscriber。また、「結果のオブザーバブルを再試行または繰り返すと、思ったように機能しなくなります。」もっと具体的にできますか?あなただけの平均でくださいnew SomeWeirdDataSource()たびに起こるために起こっているgetDataと呼ばれ、それをラップすることにより、つまりnew Observable、あなたのサブスクリプションまで、そのインスタンス化を待機させます。私はあなたが呼ぶようなとき、私は表示されません推測getDataすることなく、.subscribe私はそこに値が欠落していますので。最後に、「データソースを破壊する」ために何が起こると思いますか?ありがとう。
12527 4820年

7

AはSubject両方として機能することができobserver、およびobservable

AnにObervableは2つの方法があります。

  • 申し込む
  • 退会

あなたがするたびにサブスクライブobservable、あなたが得るobserver持っている次回エラー完全にそれのメソッドを。

ストリームソースをすべてのコンポーネントで公開したくないため、シーケンスを非表示にする必要があります。@BenLesh同じことについては、の例を参照できます。

PS:Reactive Javascriptを初めて使用したときは、理解できませんでしたasObservable。基本をはっきりと理解してからに行く必要があったからasObservableです。:)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.