RxJS-オブザーバブル

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

Observer is an object with callback functions、Observableとの相互作用がある場合、つまり、ソースがボタンクリック、Httpリクエストなどの例で相互作用した場合に呼び出されます。

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

Observableを作成する
Observableを購読する
Observableを実行する

Observableを作成する

observableは、observableコンストラクターを使用し、observable createメソッドを使用し、以下に示すように、サブスクライブ関数を引数として渡すことで作成できます。

testrx.js

import { Observable } from 'rxjs';

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

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

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

testrx.js

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

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

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

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

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

上記のコードでは、次に、completeメソッドとerrorメソッドを追加しました。

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

next、complete、errorを実行するには、以下に示すようにsubscribeメソッドを呼び出す必要があります-

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

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

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