web-dev-qa-db-ja.com

rxjsでasObservable（）を使用する場合

asObservable の使用は何ですか？

ドキュメントごと：

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

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

rxjsrxjs5
53
born2net

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である場合、期待どおりに動作しないことも意味します。

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

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

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

145
Ben Lesh

Subjectは、observerとobservableの両方として機能できます。

Obervableには2つのメソッドがあります。

  • 申し込む
  • 購読解除

subscribeをobservableにすると、next、errorおよびcompleteメソッドを含むobserverを取得します。

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

追伸：Reactive Javascriptを初めて使用したとき、asObservableを理解できませんでした。基本を明確に理解してからasObservable。に進む必要がありました。）

1
HV Sharma