Explicação detalhada do Angular2Objeto de programação 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);

Se cada evento precisasse ser embalado assim, não seria muito complicado, então o RxJs nos oferece uma função conveniente: Observable.fromEvent para facilitar a conexão de eventos.

Operadores de ligação comuns:concat, merge, combineLates e outros

Operações de projeção:map, flatMap, flatMap requer uma apresentação especial

Filtragem:filter, distinctUltilChanges

Classificação de operadores:Operadores por Categorias

Tratamento de erros:catch, retry, finally

Redução de carga:debounce, throttle, sample, pausable

Redução:buffer, bufferWithCount, bufferWithTime

Para dominar os operadores do Observable, é necessário aprender a entender os gráficos de sequência:

As setas representam sequências que mudam ao longo do tempo, por exemplo, clicar repetidamente em um elemento. Os círculos representam o impacto da sequência no exterior, como cada clique no elemento que dispara uma chamada de evento. Os números no círculo representam as informações emitidas, como cada disparo de evento que possui um objeto de evento representando algumas informações sobre a operação.

Para usar flexivelmente o Observable para lidar com lógicas complexas, é necessário aprender a usar os operadores fornecidos. Eu classifico os operadores em duas categorias, operações de sequência única e operações de sequência composta. As operações de sequência única se referem às operações de cálculo realizadas em uma sequência, enquanto as operações de sequência composta se referem aos operadores que lidam com duas ou mais sequências. As operações de sequência composta são um pouco mais difíceis de entender.

Vamos analisar primeiro as operações de sequência única, usando a operação map como exemplo:

A operação map transforma a informação emitida a cada vez que uma sequência é emitida, como no exemplo acima, onde o map multiplica o valor emitido dez vezes. Portanto, após a inscrição, o valor recebido pelo assinante não será mais o valor original123mas sim após a conversão10 20 30. Através do gráfico de sequência, é mais fácil entender as operações do Observable.

Vamos analisar uma operação de sequência composta, usando merge como exemplo

O objetivo da operação de merge é combinar duas sequências independentes em uma sequência. A sequência original1À medida que o tempo avança, em10Em 0ms, emitirá a, em2Em 00ms, emitirá b,3Em 00ms, emitirá c, e o assinante receberá4Receberá abc três valores em 00ms; a sequência2Em15Em 0ms, emitirá d,25Em 0ms, emitirá e,35Em 0ms, emitirá f, e o assinante receberá4Receber def três valores dentro de 00ms. E a nova sequência após merge será:4Receber abcdef dentro de 00ms (atenção à ordem).

Entendimento de operadores comuns：

Observable.range：Emitir uma sequência de um número determinado de valores

Observable.toArray: Converte todos os valores emitidos na sequência em um array quando a sequência é concluída

Observable.flatMap: Transforma os elementos da sequência original em uma nova sequência de fluxo e merge essa nova sequência de fluxo no local dos elementos da sequência original

Observable.startWith: Ele define o primeiro valor da sequência Observable

Observable.combineLatest: Semelhante ao promiseAll, executa apenas quando todas as sequências tiverem resultados

Observable.scan: Pode fazer a agregação de cada valor emitido na sequência, semelhante ao reduce, o reduce agrega todos os valores da sequência, emitindo um valor final quando a sequência é concluída

Observable.sample: Obter um certo número de amostras da sequência contínua

Observable.merge：Combinar várias séries em uma, pode ser usada para OR

Observable.timestamp: Pode obter o tempo de emissão de cada valor emitido

Observable.distinctUntilChanged(compare, selector): selector pega a chave usada para comparação, compare compara duas chaves

Observable.takeWhile() Parar de emitir dados quando o parâmetro for false

Resumo

Isso é tudo o que há no artigo. Espero que o conteúdo deste artigo ajude a sua aprendizagem ou trabalho. Se tiver alguma dúvida, pode deixar um comentário para trocar.