Angular Academy · Aula

Observáveis e inscrições

Crie e assine fluxos observáveis.

Observáveis e inscrições é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

O que é um observável

Um Observable é um fluxo lento de valores ao longo do tempo. Nada acontece até que você faça subscribe. Ele pode emitir zero ou mais valores e, depois, ser concluído ou gerar um erro.

RxJS é a biblioteca reativa que o Angular fornece para lidar com tarefas assíncronas, como HTTP, eventos e temporizadores.

Criando um observável

O construtor de Observable recebe uma função de assinante. Você chama next() para emitir, complete() para concluir e error() para indicar uma falha.

import { Observable } from 'rxjs';

const numbers$ = new Observable<number>(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

Inscrevendo-se

A inscrição inicia a execução. Passe um observador com manipuladores next, error e complete.

numbers$.subscribe({
  next: v => console.log('value', v),
  error: err => console.error(err),
  complete: () => console.log('done')
});
// value 1, value 2, value 3, done

Os observáveis são lentos

A função de assinante não é executada até que subscribe() seja chamado. Cada inscrição inicia uma execução nova e independente (observável frio).

const tick$ = new Observable(s => {
  console.log('executing');
  s.next(Date.now());
});
// "executing" is NOT logged until subscribe() runs

Auxiliares de criação: of e from

Você raramente usa o construtor. Auxiliares como of e from criam observáveis rapidamente.

import { of, from } from 'rxjs';

of(10, 20, 30).subscribe(v => console.log(v)); // 10 20 30
from([1, 2, 3]).subscribe(v => console.log(v)); // 1 2 3
from(fetch('/api')).subscribe(res => console.log(res));

Os criadores interval e timer

interval emite números crescentes segundo uma programação; timer espera e depois emite.

import { interval, timer } from 'rxjs';

interval(1000).subscribe(n => console.log('tick', n));
// 0, 1, 2, ... every second

timer(2000).subscribe(() => console.log('after 2s'));

HttpClient retorna observáveis

No Angular, os métodos de HttpClient retornam observáveis. A solicitação só é enviada quando você faz a inscrição.

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const http = inject(HttpClient);
http.get('/api/users').subscribe(users => console.log(users));

O objeto Subscription

subscribe() retorna uma Subscription. Chame unsubscribe() para parar de receber valores e liberar recursos.

import { interval } from 'rxjs';

const sub = interval(1000).subscribe(n => console.log(n));
// later
sub.unsubscribe(); // stops the stream

Conclusão versus cancelamento da inscrição

Quando um observável chama complete() ou error(), ele limpa os recursos automaticamente. Para fluxos infinitos (intervalos e eventos do DOM), você precisa cancelar a inscrição manualmente.

Forma abreviada de observador

Se você só se importa com os valores, passe uma única função — ela se torna o manipulador de next.

of(1, 2, 3).subscribe(v => console.log(v));
// equivalent to { next: v => console.log(v) }

Quentes versus frios (breve)

Observáveis frios começam a produzir valores quando alguém se inscreve, e cada assinante tem sua própria execução (HTTP, of, interval). Observáveis quentes produzem valores independentemente dos assinantes e compartilham esses valores (conheceremos os assuntos a seguir).

Verificação rápida

Teste sua compreensão sobre observáveis.

Recapitulação: observáveis e inscrições

Um Observable é um fluxo lento que você ativa com subscribe().

Emita com next, conclua com complete e indique falhas com error.
Os métodos de HttpClient retornam observáveis — eles são executados quando há uma inscrição.
Cancele a inscrição de fluxos infinitos para evitar vazamentos.

A seguir: assuntos e BehaviorSubject.

Perguntas Frequentes

A aula “Observáveis e inscrições” é grátis?

Sim — o texto completo de “Observáveis e inscrições” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Observáveis e inscrições”?

Crie e assine fluxos observáveis. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Observáveis e inscrições”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Observáveis e inscrições
Subjects e BehaviorSubject
Cancelamento de inscrições e vazamentos de memória
O pipe async

← Voltar para Angular Academy