Módulo 11: RxJS e Observables (O Mundo Assíncrono)
2. Resumo da Aula Anterior
No Módulo 10, dominámos a Injeção de Dependências. Aprendemos a pedir ferramentas ao Angular em vez de as criarmos. Agora, vamos aprender a lidar com dados que chegam em "streaming" (correntes de dados), algo fundamental para aplicações modernas.
3. O Que Vais Aprender Hoje
- ✅ O que é a biblioteca RxJS.
- ✅ O conceito de Observable (Observável).
- ✅ Como fazer um .subscribe() para receber dados.
- ✅ Operadores básicos: map, filter e tap.
4. Teoria: A Corrente de Dados
Conceito: Um Observable é como uma Promise, mas mais poderosa. Enquanto uma Promise acontece apenas uma vez (tipo receber uma carta), um Observable pode emitir vários valores ao longo do tempo (tipo ouvir rádio).
📻 Analogia: A Estação de Rádio
Imagina o RxJS como uma rádio FM:
- O Observable (A Antena): Está sempre a emitir ondas de música pela cidade fora. Mas tu não ouves nada automaticamente.
- O Subscribe (Ligar o Rádio): Só quando carregas no botão "ON" (Subscrever) é que o som começa a sair das colunas.
- Os Operadores (A Mesa de Mistura): Podes mudar o volume, aplicar filtros de voz ou cortar ruído *antes* do som chegar aos teus ouvidos.
5. Exemplos Práticos
Exemplo 1: Criar e Subscrever
O básico de ouvir uma corrente de dados.
import { Observable } from 'rxjs';
meuObs = new Observable(subscriber => {
subscriber.next('Primeiro Dado');
setTimeout(() => subscriber.next('Dado Atrasado'), 2000);
});
// Começar a ouvir
this.meuObs.subscribe(valor => {
console.log('Recebi:', valor);
});Exemplo 2: O Poder do .pipe()
Transformar os dados no caminho.
import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
numeros = of(1, 2, 3, 4, 5);
this.numeros.pipe(
filter(n => n > 2), // Deixa passar só maiores que 2
map(n => n * 10) // Multiplica por 10
).subscribe(v => console.log(v));
// Resultado: 30, 40, 50Exemplo 3: O Operador Tap
Espreitar os dados sem os alterar (bom para logs).
import { tap } from 'rxjs/operators';
obs.pipe(
tap(v => console.log('DEBUG:', v)),
map(v => v.toUpperCase())
).subscribe();6. Agora é a Tua Vez!
Vamos criar o "Relógio Atómico":
- Usa a função
interval(1000)do RxJS para criar uma corrente que emite um número a cada segundo. - Usa o .pipe() e o operador map para transformar esse número numa mensagem tipo
"Passaram X segundos". - No
ngOnInit, faz o .subscribe() e guarda essa mensagem numa variável do teu componente. - Mostra a variável no HTML com
{{ }}e vê o contador a subir! - Desafio Extra: Usa o
filterpara mostrar apenas segundos pares.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 **RxJS** é uma biblioteca de programação reativa usada pelo Angular.
- 📌 **Observables** emitem fluxos de dados, não apenas um valor único.
- 📌 Nada acontece sem o **.subscribe()**! É o motor que liga o fluxo.
- 📌 **Operadores** (map, filter, etc.) permitem tratar os dados como se fosse uma linha de montagem.
9. Desafios Práticos
Desafio 1: Correntes Infinitas
O que acontece se subscreveres um interval(1000) mas nunca chamares o unsubscribe() quando mudas de página?
Desafio 2: Tap vs Map
Qual a diferença fundamental entre usar o tap e o map dentro do pipe?
Desafio 3: A Rádio Desligada
Se tiveres um Observable que busca dados de um utilizador e fizeres 3 pipe() diferentes mas zero .subscribe(), a chamada à base de dados é feita? Porquê?