Primeiros passos com RxJS 6

RxJS, a biblioteca ReactiveX para JavaScript
Site oficial do RxJS

1 Padrões de design usados ​​​​em Rxjs

• Padrão de observador
• Padrão de iterador
• Padrões de design, como programação funcional e coleções

Objetivo principal: gerenciar efetivamente dados de eventos em ambientes assíncronos RxJS é um conjunto de bibliotecas de funções JavaScript usadas para lidar com eventos assíncronos ou

assíncrono

• AJAX/XHR/Buscar
• Trabalhador de serviço/fluxo de nó
• setTimeout/setInterval
• Promessa

evento

• Vários eventos DOM (click, dblclick, keyup, mousemove)
• Evento de animação CSS (evento CSS3 transactionEnd)
• Geolocalização HTML5 / WebSockets / Evento de envio de servidor

2 Conceitos básicos de RxJS

Objeto observável observável

Objeto observador observador

• Representa um objeto usado para receber [resultados da observação] (o que é recebido são dados do evento)
• Um objeto observador é um objeto que contém três propriedades (próximo, erro, completo) que contêm funções de retorno de chamada.

Objeto de assinatura de assinatura

• Representa o indivíduo de execução que está executando o Observable/Observador (pode ser usado para cancelar a assinatura)

Operadores

• Deve ter características de função pura (funções sem efeitos colaterais), conforme definido na programação funcional
• Deve ser usado para processar uma série de coletas de dados de eventos
• Operadores comuns incluem map, filter, concat, flatMap, switchMap https://reactive.how/

Assunto objeto principal

• Assim como o EventEmitter, ele é usado principalmente para transmitir dados de eventos recebidos para vários observadores.

Controlador de agendamento de agendadores

• Usado para gerenciar e agendar centralmente dados entre vários eventos para controlar a simultaneidade de eventos.

import {
    
     Subject } from 'rxjs';
import {
    
     throttleTime } from 'rxjs/operators';

export class CreateBackupComponent implements OnInit {
    
    
    clickOne = new Subject;
    ngOnInit() {
    
    
        this.clickOne.pipe(throttleTime(500)).subscribe((params) => {
    
    
            this.saveData(params);
        })
    }
    saveData(params) {
    
    
        const {
    
     id, name} = params;
        ...
    }

    okButton: {
    
    
        'click': () => {
    
    
          message.close();
          this.clickOne.next({
    
     id: newsId, name: newsName });
        }
    }
}

// 点击button，执行click事件：this.clickOne.next()
// 执行this.clickOne.next()，相当于执行this.saveData()事件
// this.clickOne.next()传入的参数{ id: newsId, name: newsName }，就是this.saveData()中的参数；
// 最终结果：连续点击click，每500毫秒只执行一次saveData事件

3 Como funciona o RxJS

interval: função interna do rxjs;
interval(500): envia um número a cada 500 milissegundos, começando em 0;
pipe: passa os dados do evento enviados a cada 500 milissegundos para processamento;
take(4): pega apenas os primeiros 4 transações;
subscribe: Assinante, o assinante em subscribe() é o observador do assinante

rxjs.interval(500).pipe(rxjs.operators.take(4)).subscribe(console.log)
0
1
2
3
// interval：建立运算子，建立observable物件
// pipe：过滤运算子
// console.log：观察者

// 解构
import {
    
     interval } from 'rxjs';
import {
    
     take } from 'rxjs.operators';
interval(500).pipe(take(4)).subscribe(console.log)

const subs = rxjs.interval(500).pipe(rxjs.operators.take(40)).subscribe(console.log)
// 每隔500毫秒发送一个数字，从0开始，发送到40
subs.unsubscrible(); // 暂停订阅

3.1 Como funciona o RxJS

• Crie um objeto observável

var click$ = rxjs.fromEvent(document, 'click')

• Criar objeto observador

var observer = {
    
     next: (x) => console.log(x) };

Um observador pode ser uma função ou um objeto. Os objetos têm três atributos: próximo, erro e concluído.

• Crie um objeto de assinatura (inscreva-se no objeto Observable e passe o objeto Observer)

var subs$ = click$.subscribe(observer);

• Cancelar assinatura do objeto Assinatura

subs$.unsubscribe();

Observável não acionará ativamente a observação. Alguém precisa se inscrever para acionar o comportamento de observação;
conecte o cano de água e filtre continuamente:

var subs$ = click$.pipe(
	filter(d => d.clientX < 500),
	take(4)
).subscribe(observer);

3.2 Uso do objeto de assunto RxJS (Assunto)

• Crie o objeto principal (você usará o objeto principal para transmissão posteriormente)

var subject = new rxjs.Subject();

• Crie um objeto observável

var clicks$ = rxjs.fromEvent(document, 'click')

• Defina para obter no máximo dois dados de eventos e defina o objeto Observable para ser concluído.

clicks$ = clicks$.pipe(take(2));

• Defina todos os cliques$ para serem transmitidos pelo objeto em questão.

clicks$.subscribe(subject);

• Finalmente, o objeto Observer é criado pelo sujeito

var subs1$ = subject.subscribe((x) => console.log(x.clientX));
var subs2$ = subject.subscribe((x) => console.log(x.clientY));

• Cancelar subscrição

subs1$.unsubscrible();
subs2$.unsubscribe();

O assunto ajuda a alcançar o efeito de um Observável ser assinado por vários observadores, o que equivale a um intermediário;
como o assunto opera em múltiplas páginas;

4 operadores comuns

4.1 Criar operadores

Responsável por criar um objeto Observável

• de
• ajax
• adiar
• gerar
• deEvento
• intervalo
• de
• faixa

4.2 Operadores de criação de combinação

Combine vários objetos observáveis ​​em um objeto observável

• corrida
• fecho eclair
• mesclar
• forkJoin
• concat
• combinarÚltimo

4.3 Operadores de conversão

Converta os dados passados ​​pelo Observable em outro formato

• concatMap
• mapa
• mapa para
• amortecedor
• switchMapTo

4.4 Operadores de filtro

Responsável por filtrar os dados passados ​​pelo Observable

• rebater
• debounceTime
• filtro
• pular
• acelerador
• aceleradorTime

4.5 Operadores de combinação

Responsável por combinar vários Observáveis

• combinar tudo
• concatAll
• começar com

4.6 Operadores multicast

Responsável pela transmissão do Observável para vários observadores

• publicar
• compartilhar

4.7 Operadores de tratamento de erros

Responsável por lidar com erros de exceção que ocorrem durante a observação observável

• catchError
• tente novamente
• tentar novamenteQuando

import {
    
     retry } from 'rxjs/operators';

ngOnInit(): void {
    
    
    this.http.get('/assets/area.json')
        .pipe(retry(3)) 
        // 请求不到数据，会再次尝试3次，还是抓不到就放弃，可以搭配delay等，延迟一定时间再retry
        .subscribe(data => {
    
    
            getArea(data);
        })
}

4.8 Operadores de funções utilitárias

Função utilitária responsável por fornecer processo de execução observável

• tocar
• atraso
• tempo esgotado

4.9 Expressões condicionais e operadores booleanos

Operador responsável por calcular condições específicas e retornar um valor booleano

• padrãoVazio
• encontrar
• todo
• está vazia

4.10 Matemática e operadores de agregação

Responsável por realizar operações matemáticas/resumidas nos dados passados ​​pelo Observable

• contar
• máx.
• min
• reduzir