📊 Capítulo 11: Operadores Essenciais RxJS
Especialização em Frontend com Angular
🗺️ Comparativo dos Operadores de Mapeamento de Ordem Superior
flowchart TD
INPUT["Nova Emissão no Stream"]
--> OP{"Qual operador usar?"}
OP --> |"switchMap (Busca / Typeahead)"| CANCEL["Cancela a requisição HTTP anterior imediatamente e processa apenas a última!"]
OP --> |"mergeMap (Uploads Paralelos)"| PARALLEL["Executa todas as requisições em paralelo sem cancelar nenhuma"]
OP --> |"concatMap (Transações em Fila)"| QUEUE["Executa uma requisição de cada vez na ordem estrita de chegada"]
OP --> |"exhaustMap (Evita Cliques Duplos)"| IGNORE["Ignora novos cliques enquanto a requisição atual estiver pendente!"]
style INPUT fill:#ede7f6,stroke:#512da8,stroke-width:2px
style OP fill:#fff3e0,stroke:#ff9800,stroke-width:2px
style CANCEL fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
style PARALLEL fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
style QUEUE fill:#c8e6c9,stroke:#2e7d32,stroke-width:1.5px
style IGNORE fill:#ffebee,stroke:#d32f2f,stroke-width:2px
🎯 Slide 1: O Pipeline Canônico de Typeahead (Busca)
termoBusca$.pipe(
debounceTime(300), // Aguarda 300ms de pausa na digitação
distinctUntilChanged(), // Só dispara se o texto for diferente do anterior
switchMap(termo => this.produtosService.buscar(termo)), // Cancela busca antiga!
catchError(err => of([])) // Recuperação graciosa de falhas
)
🎯 Slide 2: Tratamento de Erros com catchError
- O operador
catchErrorintercepta erros no stream e permite emitir um valor de fallback seguro usandoof(...)sem quebrar o Observable para futuros eventos.
🎯 Slide 3: combineLatest & forkJoin
-
combineLatest: Re-emite sempre que qualquer um dos streams mudar. forkJoin: Semelhante aPromise.all, aguarda que todos os streams completem para emitir o resultado final agrupado.
🔗 Navegação do Capítulo 11
| 📖 Ler Conteúdo Completo | 🧠 Fazer Quiz | 💻 Ver Exemplos | 🧩 Exercícios |
Slide 1 de 1
Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim