Angular: observables que você precisar conhecer

Angular: Os Observables Essenciais que Você Precisa Conhecer

Se você trabalha com Angular, já deve ter se deparado com os Observables. Longe de serem apenas uma alternativa às Promises, eles são o coração da programação reativa no framework, potencializados pela poderosa biblioteca RxJS. Entender como eles funcionam e quais utilizar é fundamental para criar aplicações robustas, eficientes e reativas. Neste artigo, vamos explorar os observables que você precisar conhecer para levar seu desenvolvimento Angular para o próximo nível.

O que é um Observable, Afinal?

Pense em um Observable como uma stream (fluxo) de dados que pode emitir múltiplos valores ao longo do tempo. Diferente de uma Promise, que resolve ou rejeita um único valor, um Observable pode emitir zero, um ou infinitos valores de forma síncrona ou assíncrona. Essa característica o torna perfeito para lidar com eventos, chamadas HTTP, WebSockets e gerenciamento de estado.

A “mágica” acontece com três peças principais:

• Observable: A fonte de dados, o fluxo em si.
• Observer: O “ouvinte” que consome os dados, implementando os métodos next(), error() e complete().
• Subscription: A conexão entre o Observable e o Observer. É o que inicia a execução e também o que permite cancelá-la.

Funções de Criação: Os Observables que Você Precisa Conhecer

Para começar a trabalhar, você não cria um Observable do zero na maioria das vezes. Em vez disso, utiliza funções de criação que o RxJS oferece. Conhecer as principais é o primeiro passo para a maestria.

1. `of()`

A forma mais simples de criar um Observable. O of() recebe uma sequência de valores como argumento, emite cada um deles em ordem e, em seguida, completa o fluxo. É ideal para dados síncronos ou para mockar respostas em testes.

import { of } from 'rxjs';

// Cria um observable que emite 1, 2, 3 e depois completa.
const source$ = of(1, 2, 3);

source$.subscribe({
  next: value => console.log(`Valor recebido: ${value}`),
  complete: () => console.log('Observable completado!')
});

// Output:
// Valor recebido: 1
// Valor recebido: 2
// Valor recebido: 3
// Observable completado!

2. `from()`

O from() é extremamente versátil, pois converte outras estruturas de dados em um Observable. Ele pode receber um array, uma Promise, ou outro Observable.

import { from } from 'rxjs';

// Convertendo um array
const arraySource$ = from([10, 20, 30]);
arraySource$.subscribe(value => console.log(`Do array: ${value}`));

// Convertendo uma Promise
const promise = new Promise(resolve => resolve('Olá da Promise!'));
const promiseSource$ = from(promise);
promiseSource$.subscribe(value => console.log(value));

3. `fromEvent()`

Este é um dos mais práticos para interagir com a DOM. O fromEvent() cria um Observable a partir de um evento de um elemento. Ele escuta o evento e emite um valor toda vez que ele ocorre.

import { fromEvent } from 'rxjs';

const button = document.getElementById('my-button');

// Cria um observable que emite o evento de clique
const click$ = fromEvent(button, 'click');

const subscription = click$.subscribe(event => {
  console.log('Botão clicado!', event);
});

// Não se esqueça de cancelar a inscrição para evitar memory leaks!
// subscription.unsubscribe();

4. `interval()` e `timer()`

Para operações baseadas em tempo, interval() e timer() são perfeitos. O interval(1000) emite uma sequência de números (0, 1, 2…) a cada segundo. Já o timer(2000) espera 2 segundos e emite um único valor (0) antes de completar.

import { interval, timer } from 'rxjs';

// Emite 0, 1, 2... a cada 1 segundo
const interval$ = interval(1000);
// interval$.subscribe(console.log);

// Espera 3 segundos, emite 0 e completa
const timer$ = timer(3000);
timer$.subscribe(() => console.log('3 segundos se passaram!'));

Subjects: Observables Especiais para Multicasting

Um Subject é um tipo especial de Observable que permite emitir valores para múltiplos Observers simultaneamente (multicasting). Ele funciona como um “EventEmitter”, sendo uma peça-chave para comunicação entre componentes que não têm relação direta.

BehaviorSubject

Dentre as variações de Subjects, o BehaviorSubject é um dos mais úteis no dia a dia. A principal diferença é que ele precisa de um valor inicial e sempre armazena o último valor emitido. Quando um novo Observer se inscreve, ele recebe imediatamente o valor mais recente.

import { BehaviorSubject } from 'rxjs';

// Inicia com o valor 'Padrão'
const state$ = new BehaviorSubject<string>('Padrão');

// Primeiro inscrito recebe o valor inicial
state$.subscribe(value => console.log(`Observer 1: ${value}`));

// Emitimos um novo valor
state$.next('Novo Valor!');

// Segundo inscrito entra depois e já recebe o último valor
state$.subscribe(value => console.log(`Observer 2: ${value}`));

// Output:
// Observer 1: Padrão
// Observer 1: Novo Valor!
// Observer 2: Novo Valor!

Conclusão

Dominar a programação reativa com RxJS é uma jornada, mas entender este conjunto de Angular: observables que você precisar conhecer é o melhor ponto de partida. Funções como of, from, fromEvent e, especialmente, o BehaviorSubject, formam a base para construir aplicações dinâmicas e com gerenciamento de estado eficiente.

O próximo passo? Comece a explorar os operadores do RxJS, como map, filter, tap e switchMap, para transformar e combinar esses fluxos de dados. Continue praticando e veja suas aplicações Angular se tornarem mais poderosas e responsivas!