RxJS では、オブザーバブルはオブザーバーを作成し、値が期待されるソースにそれをアタッチするために使用される関数です。たとえば、クリック、DOM 要素または Http リクエストからのマウス イベントなどが監視可能な例です。
言い換えれば、オブザーバーは、Observable へのインタラクションがあるときに呼び出されるコールバック関数を持つオブジェクトであると言えます。たとえば、ソースはボタンのクリックなどの操作を行っています。 HTTP リクエストなど
Observable は、複数の値の遅延プッシュ コレクションとして定義することもできます。オブザーバブルを使用して値をプッシュする方法を理解するための簡単な例を見てみましょう。
ラテックスの偏導関数
次の例を参照してください。
import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); 上記の例では、サブスクライブ時に値 10、20、30 を即時に同期的にプッシュするオブザーバブルがありますが、値 40 は、subscribe メソッドが呼び出されてから 1 秒後にプッシュされます。
オブザーバブルを呼び出して上記の値を確認したい場合は、オブザーバブルをサブスクライブする必要があります。次の例を参照してください。
import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); console.log('These are the values just before subscribe'); observable.subscribe({ next(x) { console.log('We have got value ' + x); }, error(err) { console.error('something wrong occurred: ' + err); }, complete() { console.log('Done successfully'); } }); console.log('This value is just after subscribe'); 出力：
上記のプログラムを実行すると、コンソールに次の結果が表示されます。
オブザーバブルは関数を一般化したものです
オブザーバブルは、クリック、DOM 要素からのマウス イベント、HTTP リクエストなどとして機能する関数であることはわかっていますが、オブザーバブルは EventEmitter とは異なり、複数の値の Promise とも異なります。場合によっては、オブザーバブルは、RxJS サブジェクトを使用してマルチキャストされる場合、EventEmitter のように動作することがありますが、通常は EventEmitter のように動作しません。
Observable は引数を持たない関数に似ていますが、それらを一般化して複数の値を許可します。
これを明確に理解するために例を見てみましょう。
関数の簡単な例:
function foo() { console.log('Hello World!'); return 123; } const x = foo.call(); // same as foo() console.log(x); const y = foo.call(); // same as foo() console.log(y); 出力：
次の出力が表示されます。
'Hello World!' 123 'Hello World!' 123
同じ例を Observable を使用して書いてみましょう。
import { Observable } from 'rxjs'; const foo = new Observable(subscriber => { console.log('Hello World!'); subscriber.next(123); }); foo.subscribe(x => { console.log(x); }); foo.subscribe(y => { console.log(y); }); 出力：
上記と同じ出力が表示されます。
これは、関数と Observable の両方が遅延計算であることからわかります。この関数を呼び出さない場合、console.log('Hello World!') は発生しません。また、Observables では、subscribe で「呼び出し」しないと、console.log('Hello World!') は発生しません。
オブザーバブルの働き
オブザーバブルには 3 つのフェーズがあります。
- オブザーバブルの作成
- Observable のサブスクライブ
- オブザーバブルの実行
オブザーバブルの作成
オブザーバブルを作成するには 2 つの方法があります。
- Observable コンストラクター メソッドの使用
- Observable create() メソッドの使用
Observable コンストラクター メソッドの使用
Observable コンストラクター メソッドを使用して Observable を作成し、Observable 内で使用可能なsubscriber.next メソッドを使用して「これが最初の Observable」というメッセージを追加しましょう。
testrx.js ファイル:
import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); 次のように、Observable.create() メソッドを使用して Observable を作成することもできます。
import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Observable のサブスクライブ
Observable のサブスクライブは、関数の呼び出しに似ています。データの配信先となるコールバックを提供します。
次の構文を使用して、オブザーバブルをサブスクライブできます。
構文：
observable.subscribe(x => console.log(x));
購読を使用した上記の例を参照してください。
testrx.js ファイル:
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); observer.subscribe(x => console.log(x)); 出力：
オブザーバブルの実行
Observable は、サブスクライブされると実行されます。通常、オブザーバーには通知を受けるメソッドが 3 つあります。
次（）： このメソッドは、数値、文字列、オブジェクトなどの値を送信するために使用されます。
完了（）： このメソッドは値を送信しません。これは、オブザーバブルが完了したことを示します。
エラー（）： このメソッドは、エラーが発生した場合にそれを通知するために使用されます。
3 つの通知すべてを含むオブザーバブルを作成し、その例を実行する例を見てみましょう。
testrx.js ファイル:
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { try { subscriber.next('This is 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 completed now.')); error メソッドは、エラーが発生した場合にのみ呼び出されます。上記のコードを実行すると、コンソールに次の出力が表示されます。
出力：
配列リストのソートJava
