RxJSでは、データ・ストリームの完全な流れは、少なくとも観測可能とオブザーバー含める必要があります。観察可能なプロセスを完了するためにデータをプッシュするオブザーバ、オブザーバーオブザーバ、オブザーバーのサブスクリプションに観察、観察可能なオブザーバーです。
完全なRxJSデータストリームが観測と観測者の間でインタラクティブなゲームであると言うことができます。
観測可能なデザインパターンは、次の2つを達成するために：
オブザーバーモード
反復モード
デザインパターンを書いていないので、そう渡す関心が言及する必要があり、自分に関連する本をfacieできるデザインパターンのいずれかの種類が問題の特定の種類を解決するための参照があるということです。頻繁にないデザインパターンによって複雑な問題は、一人で解決するだけでなく、デザインパターンの多様性を結合する必要があり、かつRxJS観測は、観測モードとイテレータパターンの組み合わせであることができます。
インタラクティブObservaleとオブザーバー
購読
まず、データソースとして、観測を作成します
const { Observable } = rxjs; const sourceObservable$ = new Observable(observer => {
observer.next('hello');
observer.next('rxjs');
});その後、加入者として、オブザーバを設定します
const Observer = { next: res => console.log(res)
};最後に観察可能なオブザーバーのサブスクリプションは、データが流れ始めます
sourceObservable$.subscribe(Observer); // hello
// rxjs非常に単純なデータ・ストリームは完了です。
状態転送
上記の例では、次れる唯一の状態は、データが連続的に下流に転送され、実際には、データの3つの状態が存在するフロー処理に流れます。
次回、通常のフローに次の状態
エラーは、異常な流れが中止キャプチャするために
完全な、データストリームは、フロー終了を完了しました
変更は、他の2つの状態を構成し、上記のコードを追いました
const sourceObservable$ = new Observable(observer => {
observer.next('hello');
observer.error('the data is wrong!');
observer.next('rxjs');
observer.complete();
}); const Observer = { next: res => console.log(res), error: err => console.log(err), complete: () => console.log('complete!')
}
sourceObservable$.subscribe(Observer); // hello
// the data is wrong!今オブザーバーは、デジャヴのようなものではありません見て？はい、オブザーバーは、実際のイテレータアップです。
この時点で、見つけることは困難ではない、対話型プロセスは、実際に観測され、観察者は、観察モードによって注入オブザーバは、次のカーソル制御データソース観察可能なデータ・フローによって、イテレータを観察するために、および中に発生する可能性のある実際の流量に基づいて説明しますエラーまたは完全に転送する状態。
登録解除
観測可能とオブザーバーは今確立接触を通じて加入しているが、時には私たちは、このような部品が破壊するときのように、接触を、これを延期する必要があります。サブスクリプションをキャンセルする必要がある。この時間は、次の例を参照してください
const sourceObservable$ = new Observable(observer => { let number = 1;
setInterval(() => {
observer.next(number++);
}, 1000);
}); const Observer = { next: res => console.log(res), error: err => console.log(err), complete: () => console.log('complete!')
} const subscription = sourceObservable$.subscribe(Observer);
setTimeout(() => { // 取消订阅
subscription.unsubscribe();
}, 4000); // 1
// 2
// 3
// 4なお、この例では、退会ものの、しかしsourceObservable $データソースが終わらないよう、完全なので、メソッドを呼び出しませんが、もはやデータのプッシュオブザーバーを受けることはありません
差異の観察を容易にするために、我々はそれsourceObservable $を変更します
const sourceObservable$ = new Observable(observer => { let number = 1;
setInterval(() => { console.log('subscribe:' + number);
observer.next(number++);
}, 1000);
}); // subscribe: 1
// 1
// subscribe: 2
// 2
// subscribe: 3
// 3
// subscribe: 4
// 4
// subscribe: 5
// subscribe: 6
// ...ホット観察可能なコールド和観察可能
我々は2 ObserverAは、ObserverB離れN秒に加入しているされた観察可能なシナリオがあるとし、その後、ObserverB前のデータは、それがサブスクリプションを受信する必要があるかどうか？
実際には、正確にはこのために、あることを実際のビジネスシナリオに応じて受信するかどうか、決まった答えはありませんので、いくつかのホット観察可能とコールド観測があるでしょう。
ホット観察可能：熱が観察の対象は、生きるに似て、何を参照することで、放送が始まっ開いた瞬間からです、そしてコンテンツが見逃されている前に。一瞬だけを開始し、データを受信するためにサブスクライブ。
コールド観察可能：あなたが見るものを記録し、放送に似コールド観察したオブジェクトは、あなたがビデオの最初の最初の数秒を開いています。すべてのサブスクリプションは、ゼロからのデータの受信を開始します
唯一の現在のデータをプッシュするホット観察可能な、各サブスクリプションの下で見て、次のように、データは、各プッシュサブスクリプションではリセットされません。
// 先产生数据
let number = 1; const sourceObservale$ = new Observable(observer => { let num = number;
setInterval(() => {
observer.next(num++);
number = num;
}, 1000);
}); const ObserverA = ObserverB = { next: item => console.log(item), error: err => console.log(err), complete: () => console.log('complete!')
}
sourceObservale$.subscribe(ObserverA);
setTimeout(() => {
sourceObservale$.subscribe(ObserverB);
}, 2000); // 1 => A
// 2 => A
// 3 => A
// 3 => B
// 4 => A
// 4 => B
// ..コールド観測のために、再起動のプッシュに各サブスクリプションされている次のように、それは、毎回のサブスクリプション・データプッシュリセットされます：
const sourceObservale$ = new Observable(observer => { // 订阅时产生数据
let number = 1;
setInterval(() => {
observer.next(number++);
}, 1000);
}); // 中间不变
... // 1 => A
// 2 => A
// 3 => A
// 1 => B
// 4 => A
// 2 => B
// ..また、ここで見ることができ、唯一の加入されず、コールド観察可能で、さらに行くとき加入して内部ロジックで行わ評価を観察可能な不活性、生成されていなくてもデータです。
ルイ江Yunguanのウェブサイトへのリンク：http://www.eflycloud.com/#register?salesID=6DGNUTUAV