RxJS 6 の入門

JavaScript 用 ReactiveX ライブラリ RxJS
RxJS 公式ウェブサイト

1 Rxjsで使用されるデザインパターン

オブザーバーパターン
イテレータパターン
関数型プログラミングやコレクションなどのデザインパターン

主な目的:非同期環境でイベントデータを効果的に管理する RxJS は、非同期またはイベントを処理するために使用されるJavaScript 関数ライブラリ
のセットです

非同期

AJAX / XHR / フェッチ
Service Worker / ノードストリーム
setTimeout / setInterval
約束

イベント

さまざまな DOM イベント (click、dblclick、keyup、mousemove)
CSSアニメーションイベント（CSS3transitionEndイベント）
HTML5 地理位置情報 / WebSocket / サーバー送信イベント

RxJS の 2 つの中心的な概念

観測可能な観測可能なオブジェクト

オブザーバーオブザーバーオブジェクト

[観測結果]を受信するためのオブジェクトを表します(受信するのはイベントデータです)
オブザーバーオブジェクトは、コールバック関数を含む 3 つのプロパティ (next、error、complete) を含むオブジェクトです。

サブスクリプションサブスクリプションオブジェクト

Observable / Observer を実行している実行者を表します (サブスクライブを解除するために使用できます)

オペレーター

関数型プログラミングで定義されている純粋な関数の特性 (副作用のない関数) が必要です
一連のイベントデータ収集を処理するために使用する必要があります
一般的な演算子には、map、filter、concat、 flatMap、switchMap が含まれますhttps://reactive.how/

主題の主オブジェクト

EventEmitter と同様に、主に受信したイベントデータを複数の Observer にブロードキャストするために使用されます。

スケジューラースケジュールコントローラー

複数のイベント間のデータを一元管理およびスケジュールし、イベントの同時実行を制御するために使用されます。

import {
    
     Subject } from 'rxjs';
import {
    
     throttleTime } from 'rxjs/operators';

export class CreateBackupComponent implements OnInit {
    
    
    clickOne = new Subject;
    ngOnInit() {
    
    
        this.clickOne.pipe(throttleTime(500)).subscribe((params) => {
    
    
            this.saveData(params);
        })
    }
    saveData(params) {
    
    
        const {
    
     id, name} = params;
        ...
    }

    okButton: {
    
    
        'click': () => {
    
    
          message.close();
          this.clickOne.next({
    
     id: newsId, name: newsName });
        }
    }
}

// 点击button，执行click事件：this.clickOne.next()
// 执行this.clickOne.next()，相当于执行this.saveData()事件
// this.clickOne.next()传入的参数{ id: newsId, name: newsName }，就是this.saveData()中的参数；
// 最终结果：连续点击click，每500毫秒只执行一次saveData事件

3 RxJS の仕組み

インターバル: rxjs の組み込み関数;
インターバル(500): 0 から始まる 500 ミリ秒ごとに数値を送信;
パイプ: 500 ミリ秒ごとに送信されたイベントデータを処理に渡します;
take(4): 最初のデータのみを取得します4 トランザクション;
サブスクライブ: サブスクライバー、subscribe() のサブスクライバーはサブスクライバーオブザーバーです

rxjs.interval(500).pipe(rxjs.operators.take(4)).subscribe(console.log)
0
1
2
3
// interval：建立运算子，建立observable物件
// pipe：过滤运算子
// console.log：观察者

// 解构
import {
    
     interval } from 'rxjs';
import {
    
     take } from 'rxjs.operators';
interval(500).pipe(take(4)).subscribe(console.log)

const subs = rxjs.interval(500).pipe(rxjs.operators.take(40)).subscribe(console.log)
// 每隔500毫秒发送一个数字，从0开始，发送到40
subs.unsubscrible(); // 暂停订阅

3.1 RxJS の仕組み

Observable オブジェクトを作成する

var click$ = rxjs.fromEvent(document, 'click')

オブザーバーオブジェクトの作成

var observer = {
    
     next: (x) => console.log(x) };

オブザーバーは関数またはオブジェクトであり、オブジェクトには次、エラー、および完了の 3 つの属性があります。

サブスクリプションオブジェクトを作成します (Observable オブジェクトをサブスクライブし、Observer オブジェクトに渡します)。

var subs$ = click$.subscribe(observer);

サブスクリプションオブジェクトのサブスクライブを解除する

subs$.unsubscribe();

Observable は積極的に観測をトリガーしません。観測動作をトリガーするには、誰かがサブスクライブする必要があります。
水道管を接続し、継続的にフィルターします。

var subs$ = click$.pipe(
	filter(d => d.clientX < 500),
	take(4)
).subscribe(observer);

3.2 RxJSのサブジェクトオブジェクト(Subject)の使い方

メインオブジェクトを作成します (後でブロードキャストにメインオブジェクトを使用します)

var subject = new rxjs.Subject();

Observable オブジェクトを作成する

var clicks$ = rxjs.fromEvent(document, 'click')

最大 2 つのイベントデータを取得し、Observable オブジェクトを完了するように設定します。

clicks$ = clicks$.pipe(take(2));

すべての click$ がサブジェクトオブジェクトによってブロードキャストされるように設定します。

clicks$.subscribe(subject);

最後に、Observer オブジェクトがサブジェクトによって作成されます。

var subs1$ = subject.subscribe((x) => console.log(x.clientX));
var subs2$ = subject.subscribe((x) => console.log(x.clientY));

購読を解除する

subs1$.unsubscrible();
subs2$.unsubscribe();

サブジェクトは、複数のオブザーバーによってサブスクライブされる Observable の効果 (仲介者に相当)、
サブジェクトが複数のページでどのように動作するか、を実現するのに役立ちます。

4 つの一般的な演算子

4.1 演算子の作成

Observable オブジェクトの作成を担当します

から
アヤックス
延期する
生成する
イベントから
間隔
の
範囲

4.2 組み合わせ作成演算子

複数の Observable オブジェクトを 1 つの Observable オブジェクトに結合する

人種
ジップ
マージ
フォーク結合
連結
結合最新

4.3 変換演算子

Observable によって渡されたデータを別の形式に変換します

連結マップ
地図
地図へ
バッファ
スイッチマップへ

4.4 フィルタ演算子

Observable によって渡されたデータをフィルタリングして除外する責任を負います。

デバウンス
デバウンス時間
フィルター
スキップ
スロットル
スロットル時間

4.5 組み合わせ演算子

複数のObservableの結合を担当します

すべてを組み合わせる
すべてを連結
皮切りに

4.6 マルチキャストオペレータ

放送を担当複数の観測者から観測可能

公開
共有

4.7 エラー処理演算子

Observable の観察中に発生する例外エラーの処理を担当します。

キャッチエラー
リトライ
再試行するとき

import {
    
     retry } from 'rxjs/operators';

ngOnInit(): void {
    
    
    this.http.get('/assets/area.json')
        .pipe(retry(3)) 
        // 请求不到数据，会再次尝试3次，还是抓不到就放弃，可以搭配delay等，延迟一定时间再retry
        .subscribe(data => {
    
    
            getArea(data);
        })
}

4.8 ユーティリティ関数演算子

Observable 実行プロセスを提供するユーティリティ関数

タップ
遅れ
タイムアウト

4.9 条件式とブール演算子

特定の条件を計算し、ブール値を返す演算子

デフォルト空
探す
毎
空です

4.10 数学と集計演算子

Observable によって渡されたデータに対して数学的/要約演算を実行する責任を負います。

カウント
最大
分
減らす