Rxjs-observables

RxJS-オブザーバブル

オブザーバブルは、オブザーバーを作成し、値が期待されるソースにアタッチする関数です。たとえば、クリック、dom要素からのマウスイベント、またはHttpリクエストなどです。

• Observerはコールバック関数を備えたオブジェクト*であり、Observableへのインタラクションがあるときに呼び出されます。

この章では、次のトピックについて説明します-

• 観察可能なものを作成
• Observableを購読
• 監視可能を実行

観察可能なものを作成

オブザーバブルは、オブザーバブルコンストラクターを使用して、またオブザーバブルcreateメソッドを使用し、次に示すようにサブスクライブ関数を引数として渡すことによって作成できます-

testrx.js

import { Observable } from 'rxjs';

var observable = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

Copy

オブザーバブルを作成し、Observable内で利用可能な subscriber.next メソッドを使用して、「My First Observable」というメッセージを追加しました。

以下に示すように、Observable.create（）メソッドを使用してObservableを作成することもできます-

testrx.js

import { Observable } from 'rxjs';
var observer = Observable.create(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

Copy

Observableを購読

あなたは以下のようにオブザーバブルをサブスクライブできます-

testrx.js

import { Observable } from 'rxjs';

var observer = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);
observer.subscribe(x => console.log(x));

Copy

オブザーバーがサブスクライブされると、Observableの実行が開始されます。

これは、ブラウザコンソールに表示されるものです-

Subscribe Observable

監視可能を実行

オブザーバブルは、サブスクライブされると実行されます。 オブザーバーは、通知される3つのメソッドを持つオブジェクトです。

• next（）*-このメソッドは、数値、文字列、オブジェクトなどの値を送信します。
• complete（）*-このメソッドは値を送信せず、オブザーバブルが完了したことを示します。
• error（）*-このメソッドは、もしあればエラーを送信します。

3つの通知すべてでオブザーバブルを作成し、同じように実行してみましょう。

testrx.js

import { Observable } from 'rxjs';
var observer = new Observable(
   function subscribe(subscriber) {
      try {
         subscriber.next("My First Observable");
         subscriber.next("Testing Observable");
         subscriber.complete();
      } catch(e){
         subscriber.error(e);
      }
   }
);
observer.subscribe(x => console.log(x), (e)=>console.log(e),
   ()=>console.log("Observable is complete"));

Copy

上記のコードでは、次の完全なエラーメソッドを追加しました。

try{
   subscriber.next("My First Observable");
   subscriber.next("Testing Observable");
   subscriber.complete();
} catch(e){
   subscriber.error(e);
}

Copy

次に、完了してエラーを実行するには、次に示すようにsubscribeメソッドを呼び出す必要があります-

observer.subscribe(x => console.log(x), (e)=>console.log(e),
   ()=>console.log("Observable is complete"));

Copy

エラーが発生した場合にのみ、エラーメソッドが呼び出されます。

これはブラウザに表示される出力です-

監視可能を実行