Dettagli dell'oggetto Observable nel codice di Angular2

前言

RxJs提供的核心是Observable对象，它是一个使用可观察数据序列实现组合异步和事件编程。
跟这个很类似的异步编程模型是Promise，Promise是基于状态变化的异步模型，一旦由等待状态进入成功或失败状态便不能再次修改，当状态变化时订阅者只能够拿到一个值；而Observable是基于序列的异步编程模型，随着序列的变化，订阅者可以持续不断的获取新的值。而且Promise只提供回话机制，并没有更多的操作来支持对结果的复杂处理，而Observable提供了多种多样的操作符，来处理运算结果，以满足复杂的应用逻辑。

在实际编程中，我们主要与三个对象打交道：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);

Se ogni evento ha bisogno di essere impacchettato in questo modo, non sarebbe troppo complicato, quindi RxJs ci fornisce una funzione conveniente: Observable.fromEvent per facilitare la connessione degli eventi.

Operatori di collegamento comuni:concat, merge, combineLates e altri

Operazioni di proiezione:map, flatMap, flatMap è un'operazione di proiezione che merita attenzione

Filtraggio:filter, distinctUltilChanges

Classificazione degli operatori:Operators by Categories

Gestione degli errori:catch, retry, finally

Riduzione della pressione:debounce, throttle, sample, pausable

Riduzione:buffer, bufferWithCount, bufferWithTime

Per padroneggiare gli operatori Observable, è necessario imparare a leggere i diagrammi sequenza:

Le frecce rappresentano le sequenze che cambiano nel tempo, come quando si fa clic su un elemento in continuazione, i cerchi rappresentano l'impatto della sequenza sull'esterno, come quando ogni clic su un elemento scatena una chiamata di ritorno dell'evento, i numeri nei cerchi rappresentano le informazioni emesse all'esterno, come quando ogni scatena di un evento ha un oggetto evento che rappresenta alcune informazioni dell'operazione.

Per utilizzare in modo flessibile Observable per gestire logiche complesse, è necessario imparare a utilizzare gli operatori forniti. Ho diviso gli operatori in due categorie, operazioni su sequenze singole e operazioni su sequenze composite, dove le operazioni su sequenze singole si riferiscono alle operazioni di calcolo eseguite su una sequenza, mentre le operazioni su sequenze composite si riferiscono agli operatori che trattano due o più sequenze, le operazioni su sequenze composite sono relativamente più difficili da comprendere.

Ecco un esempio di operazione su una singola sequenza, prendiamo map come esempio:

L'operazione map trasforma le informazioni emesse ogni volta da una sequenza, come nella figura, map moltiplica ogni valore di emissione per dieci, quindi dopo che l'abbonato si iscrive, i valori di abbonamento ricevuti non sono più i valori originali 123, ma i valori convertiti 10 20 30. La diagramma sequenza rende più facile comprendere i calcoli Observable.

Ora guardiamo un'operazione di sequenza complessa, prendiamo merge come esempio.

L'obiettivo dell'operazione di merge è combinare due sequenze indipendenti in una sequenza singola. La sequenza originale 1, man mano che il tempo passa, emette a a 100ms, b a 200ms, c a 300ms, e il suo abbonato riceve i tre valori abc a 400ms; la sequenza 2 emette d a 150ms, e a 250ms, f a 350ms, e il suo abbonato riceve i tre valori def entro 400ms. La nuova sequenza creata da merge riceverà abcdef (attenzione all'ordine) entro 400ms.

Comprensione degli operatori comuni:

Observable.range：Emette una sequenza di un certo numero di valori

Observable.toArray: Converti tutti i valori emessi nella sequenza quando la sequenza è completata in un array

Observable.flatMap: Converti gli elementi della sequenza originale in una nuova sequenza di flusso e unisci questa nuova sequenza di flusso nella posizione degli elementi della sequenza originale

Observable.startWith: Imposta il primo valore della sequenza Observable

Observable.combineLatest: Simile a promiseAll, esegue quando tutte le sequenze hanno un risultato

Observable.scan: Aggrega i valori emessi in ogni momento della sequenza, simile a reduce, reduce aggrega tutti i valori della sequenza, invia un valore finale quando la sequenza è completata

Observable.sample: Prende un campione da una sequenza continua

Observable.merge：Unisce più sequenze in una, può essere utilizzato per OR

Observable.timestamp: Ottiene il momento in cui è stato emesso ogni valore emesso

Observable.distinctUntilChanged(compare, selector): selector preleva la chiave da confrontare, compare viene utilizzato per confrontare due chiavi

Observable.takeWhile() Ferma l'emissione dei dati quando il parametro è false

Conclusione

Questo è tutto il contenuto dell'articolo. Spero che il contenuto di questo articolo possa aiutarti a imparare o lavorare meglio. Se hai domande, puoi lasciare un commento per discuterle.