今回はrxjsについて詳しく説明します。rxjsを使用する際の注意点は何ですか?実際の事例を見てみましょう。
rxjs (Reactive Extensions for rxjs は非同期シナリオに適しており、フロントエンドの対話におけるリクエストとイベントを最適化するために使用できます。 rxjs の特徴 Promise、ajax、イベントのいずれであっても、それらはすべてシーケンス (Observable Sequence) にカプセル化されており、非同期リンクが変更されると、そのシーケンスを監視することで変更された情報を傍受できます。 たとえば、フロントエンド ビジネス レイヤーとプレゼンテーション レイヤーは分離されており、指定されたイベントがトリガーされたときに、プレゼンテーション レイヤーは DOM とは関係のない処理ロジックを気にする必要がありません。同時に、ビジネス層は、プレゼンテーション層に公開することなく、非同期操作における複数の非同期ロジック間の関係を組み立てることもできます。プレゼンテーション層は、非同期操作でのデータ変更に関係します。 rxjs が開発したビジネス層は、高い弾力性、高い安定性、高いリアルタイム性という特徴を持っています。 rxjs インスタンスの概念Observable: 観察可能なデータ シーケンス。Observer: オブザーバー インスタンス。指定されたデータをいつ観察するかを決定します。Subscription: データ シーケンスを観察すると、サブスクリプション インスタンスが返されます。Operators: 観察可能な操作メソッド、以下を含むデータシーケンスの変換、フィルタリングなど、すべての Operators メソッドで受け入れられるパラメータは、送信された最後のデータ変更の値であり、メソッドの戻り値は、新しいデータ変更を発行するために呼び出されます。 Subject: 監視されたオブジェクト。 : スケジューリングの同時実行性を制御します。つまり、Observable がサブジェクトの変更応答を受け入れるときに、スケジューラーを通じて応答モードを設定できます。現在の組み込み応答は、Object.keys (Rx.Subject) を呼び出すことで表示できます。 Observable には、作成、サブスクリプション、実行、破棄という 4 つのライフ サイクル
があります。 シーケンスがシーケンス ソース インスタンスを通じて新しいデータ変更を発行するときに、応答メソッド (コールバック メソッド) をサブスクライブできます。 応答アクションは、実際には Observable の実行です。 シーケンス ソース インスタンスは破棄でき、サブスクリプション メソッドでエラーが発生すると自動的に破棄されます。 シーケンス ソース インスタンスの catch メソッドは、サブスクリプション メソッドで発生したエラーをキャプチャでき、シーケンス ソース インスタンスは、catch メソッドから返された値を新しいシーケンス ソース インスタンスとして受け入れることができます。 rxjs 演算子rxjs は、Observable オブジェクトを作成するための多くの演算子を提供しますimport Rx from 'rxjs';create
let observable = Rx.Observable
.create((observer)=> {
observer.next('hello');
observer.next('world');
});
//订阅Observable observable.subscribe((value)=> { console.log(value);
});world
of
let observable = Rx.Observable.of('hello', 'world');
observable.subscribe({ next: (value)=> { console.log(value);
}, complete: ()=> { console.log('complete');
}, error: (error)=> { console.log(error);
}
});ワールド
完了
from
let array = [1, 2, 3];let observable = Rx.Observable.from(array);
observable.subscribe({ next: (value)=> { console.log(value);
}, complete: ()=> { console.log('complete');
}, error: (error)=> { console.log(error);
}
});2 3 complete fromEvent
イベント変数の変換
Rx.Observable.fromEvent(document.querySelector('button'), 'click'); fromPromise
let observable = Rx.Observable
.fromPromise(new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello world');
},3000)
}));
observable.subscribe({ next: (value)=> { console.log(value);
}, complete: ()=> { console.log('complete');
}, error: (error)=> { console.log(error);
}
});完了
空
数値型
のパラメーターをサポートしています。let observable = Rx.Observable.interval(1000);
observable.subscribe({ next: (value)=> { console.log(value);
}, complete: ()=> { console.log('complete');
}, error: (error)=> { console.log(error);
}
}); 1
2
... 上記のコードは、1 秒ごとに増加する値が出力され、初期値は 0 から始まることを意味します。
observable.subscribe({ next: (value)=> { console.log(value);
}, complete: ()=> { console.log('complete');
}, error: (error)=> { console.log(error);
}
});出力: 0 //1秒後
1 //5秒後
...
プルvsプッシュ
すべての JavaScript 関数はプル システムです。関数を呼び出すコードは、単一の戻り値を取得することによってデータを消費します。
ES6 のイテレーターとジェネレーターGenerator
は別のプル システムです。 iterator.next() を呼び出すコードはコンシューマーであり、そこから複数の値をプルできます。
プッシュ
プッシュ システムでは、データの作成者がいつデータをコンシューマに送信するかを決定します。コンシューマは、データを受信する前にデータを受信することに気づきません。
Promise は最も一般的なプッシュ システムです。Promise (データのプロデューサー) は解決済み (成功ステータス) または拒否 (失敗ステータス) を送信してコールバック (データ コンシューマー) を実行しますが、Promise がいつデータを取得するかを決定する関数とは異なります。はこのコールバック関数にプッシュされます。
RxJS は、新しい Push システムである Observables (観察可能なオブジェクト) を導入します。監視可能なオブジェクトは、複数の値を生成するプロデューサーであり、新しいデータが生成されると、それがオブザーバーにアクティブにプッシュされます。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
以上がrxjsの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
