Detallado de Angular2Objeto de programación Observable

前言

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);

Si cada evento necesita este tipo de envoltura, ¿no sería demasiado complicado? Por lo tanto, RxJs nos proporciona una función conveniente: Observable.fromEvent para facilitar la conexión de eventos.

Operadores de enlace comunes:concat, merge, combineLates, etc.

Operaciones de proyección:map, flatMap, flatMap requiere una presentación especial

Filtrado:filter, distinctUltilChanges

Categorías de operadores:Operadores por Categorías

Manejo de errores:catch, retry, finally

Reducción de presión:debounce, throttle, sample, pausable

Reducción:buffer, bufferWithCount, bufferWithTime

Para dominar los operadores de Observable, primero hay que aprender a entender los diagramas de secuencia:

Las flechas representan las secuencias que cambian con el tiempo, por ejemplo, hacer clic en un elemento una y otra vez con el mouse, los círculos representan el impacto de la secuencia hacia afuera, como cada clic en el elemento desencadena una llamada de devolución de eventos, los números en los círculos representan la información emitida hacia afuera, como cada desencadenamiento de eventos tiene un objeto de evento que representa cierta información de esta operación.

Para utilizar de manera flexible el Observable para manejar lógicas complejas, es necesario aprender a usar los operadores que proporciona. Dividiré los operadores en dos categorías, operaciones de secuencia única y operaciones de secuencia compuesta. Las operaciones de secuencia única se refieren a las operaciones de cálculo realizadas en una secuencia, mientras que las operaciones de secuencia compuesta se refieren a los operadores que manejan dos o más secuencias, y las operaciones de secuencia compuesta son un poco más difíciles de entender.

Veamos primero las operaciones de secuencia única, tomemos el ejemplo de la operación map

La operación de map transforma la información emitida en cada emisión de una secuencia, como en el gráfico superior, map multiplica cada valor emitido por diez, por lo que cuando el suscriptor se suscribe, los valores suscritos ya no son los originales123sino que es la que ha sido transformada10 20 30. A través de los diagramas de secuencia se puede entender más fácilmente las operaciones de Observable.

Vamos a ver una operación de secuencia compuesta, tomemos el ejemplo de merge

El objetivo de la operación de fusión es combinar dos secuencias independientes en una sola. La secuencia original1A medida que el tiempo avanza,10Emite a a las 0ms, en2Emite b a las 00ms,3Emite c a las 00ms, y el suscriptor en4Recibir tres valores abc a las 00ms; la secuencia2En15Emite d a las 0ms,25Emite e a las 0ms,35Emite f a las 0ms, y el suscriptor en4Recibir tres valores def en 00ms. Después de merge, la nueva secuencia en4Recibir abcdef en 00ms (prestar atención al orden).

Comprender operadores comunes：

Observable.range：Secuencia que emite un cierto número de valores

Observable.toArray: Convierte todos los valores emitidos en una secuencia al finalizar la secuencia en un array

Observable.flatMap: Convierte los elementos de la secuencia de flujo original en una nueva secuencia de flujo, y luego mergea esta nueva secuencia de flujo en la posición de los elementos de la secuencia original

Observable.startWith: Establece el primer valor de la secuencia Observable

Observable.combineLatest: Similar a promiseAll, se ejecuta solo cuando todas las secuencias tienen resultados

Observable.scan: Puede hacer una agregación de cada valor emitido en la secuencia, similar a reduce, reduce agrupa todos los valores de la secuencia, y emite un valor final cuando la secuencia se completa

Observable.sample: Obtener una muestra de una secuencia continua

Observable.merge：Combine múltiples secuencias en una, puede usar OR

Observable.timestamp: Puede obtener el tiempo de emisión de cada valor emitido

Observable.distinctUntilChanged(compare, selector): selector extrae la clave utilizada para comparar, compare compara dos claves

Observable.takeWhile() Detener la emisión de datos cuando el parámetro sea false

Resumen

Este es el contenido completo del artículo, espero que el contenido de este artículo pueda ser de cierta ayuda para su aprendizaje o trabajo, si tienen alguna pregunta, pueden dejar un mensaje para la comunicación.