Angularの詳細2のプログラミングオブジェクトObservable

前書き

RxJsが提供する核心はObservableオブジェクトで、これは可観察データシーケンスを使用して非同期およびイベントプログラミングを実現するものです。
Promiseと非常に似た非同期プログラミングモデルは、Promiseです。Promiseは状態変化に基づく非同期モデルで、一旦待機状態から成功または失敗状態に移行すると、その状態は再び変更できません。状態が変化すると、サブスクライバーは常に1つの値を受け取ることができます；一方、Observableはシーケンスに基づく非同期プログラミングモデルで、シーケンスの変化に伴い、サブスクライバーは新しい値を継続的に取得できます。さらに、Promiseは会話メカニズムのみを提供し、結果の複雑な処理をサポートする操作は多くありませんが、Observableはさまざまな操作子を提供し、複雑なアプリケーションのロジックを満たすために使用されます。

実際のプログラミングでは、主に以下の3つのオブジェクトと対面します：Observable、observer、Subscription：

以一个元素的clickイベントを使用して、Observableの使い方を見てみましょう：

var clickStream = new Rx.Observable(observer => {
var handle = evt => observer.next(evt);
element.addEventListener('click', handle);
return () => element.removeEventListener('click', handle);
});
subscription = clickStream.subscribe(evt => {
console.log('onNext: ')} + evt.id);
}, err => {
console.error('onError');
}, () => {
console.log('onComplete');
});
setTimeout(() => {
subscription.unsubscribe();
}, 1000);

各イベントがこのようにパッケージ化される必要があるとすれば、非常に面倒ですので、RxJsは便利な関数Observable.fromEventを提供して、イベントを簡単に結びつけることができます。

一般的なリンク操作符：concat、merge、combineLatesなど

投影操作：map、flatMap、flatMapは特に説明が必要です

フィルタリング：filter、distinctUltilChanges、

操作符のカテゴリ：カテゴリ別の操作符

エラーハンドリング：catch、retry、finally

减压：debounce、throttle、sample、pausable

減少：buffer、bufferWithCount、bufferWithTime

Observableの操作符を掌握するには、シーケンス図を理解する必要があります：

矢印は時間の経過に伴うシーケンスを表しており、例えば要素上でマウスを連続的にクリックすると、円はシーケンスが外に影響を与えることを表しており、各回のクリック要素はイベントコールバックをトリガーします。円の中の数字は外にエミッタ情報を送信することを表しており、各イベントのトリガーにはイベントオブジェクトがあり、今回の操作に関する情報を含んでいます。

Observableを使用して複雑なロジックを柔軟に処理するには、提供される操作符を学ぶ必要があります。私は操作符を2つのカテゴリに分類します、単一シーケンス操作と複合シーケンス操作です。単一シーケンス操作は、シーケンスに対して行われる操作演算を指し、複合シーケンス操作は2つまたはそれ以上のシーケンスを処理する操作符を指します。複合シーケンス操作は少し難解です。

まずは単一シーケンス操作を見てみましょう、例としてmap操作を使用します：

map操作は、シーケンス中の各回の外向きエミッタ情報を変換することです。例えば、上の図のmapは各回のエミッタ値を10倍にしますので、サブスクライバーがサブスクライブした後、各回受け取るサブスクライブ値はもはや元の123それどころか、変換された10 20 30。シーケンス図を使うことで、Observableの演算をより簡単に理解できます。

以下に複合シーケンス操作を見てみましょう、例としてmergeを使用します

merge操作の目的は、2つの独立したシーケンスを1つのシーケンスに合成することです。元のシーケンス1時間が進むにつれて、100msでaをエミッションし、以下の200msでbをエミッションし、300msでcをエミッションし、そのサブスクリーバーは400msでabcの3つの値を受け取ります；シーケンス2以下の150msでdをエミッションし、250msでeをエミッションし、350msでfをエミッションし、そのサブスクリーバーは400ms以内にdefの3つの値を受け取ります。merge後の新しいシーケンスは、400ms以内にabcdef（順序に注意）を受け取ります。

常用操作符の理解：

Observable.range：特定の数値のエミッションを持つシーケンス。

Observable.toArray: シーケンスが完了したときにすべてのエミッション値を配列に変換します。

Observable.flatMap: 元のシーケンスストリームの要素を新しいシーケンスストリームに変換し、新しいシーケンスストリームを元のシーケンスの要素の場所にmergeします。

Observable.startWith: Observableシーケンスの最初の値を設定します

Observable.combineLatest: promiseAllに似ていますが、すべてのシーケンスが結果を持つまで実行されません

Observable.scan: シーケンスの各エミッション値を集約し、reduceに似ていますが、reduceはシーケンス全体の値を集約し、シーケンスが完了したときに最終値を送信します

Observable.sample: 継続的なシーケンスから一定のサンプルを取得します

Observable.merge：複数のシーケンスを1つに統合し、ORを使用できます

Observable.timestamp: 各エミッタータイムのエミッション値を取得できます

Observable.distinctUntilChanged(compare, selector): selectorは比較に使用されるkeyを取得し、compareは2つのkeyを比較するために使用されます

Observable.takeWhile() パラメータがfalseの場合、データの送信を停止します

まとめ

これがこの記事の全てです。この記事の内容が皆さんの学習や仕事に少しでも役立つことを願っています。何か疑問があれば、コメントで交流してください。