Angular Academy · Aula

Operadores de combinação

Combine fluxos com combineLatest e forkJoin.

Operadores de combinação é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 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.

Por que combinar fluxos

Aplicativos reais coordenam várias fontes assíncronas: diversas chamadas HTTP, um valor de formulário junto com um filtro, um clique junto com o estado mais recente. Os operadores de combinação unem vários observables em um só.

combineLatest

combineLatest emite um array com o valor mais recente de cada fonte sempre que qualquer fonte emitir — depois que todas tiverem emitido pelo menos uma vez.

import { combineLatest } from 'rxjs';

combineLatest([name$, age$]).subscribe(
  ([name, age]) => console.log(name, age)
);
// re-emits whenever name$ OR age$ changes

Caso de uso de combineLatest

É ótimo para estados derivados da interface: combine um termo de pesquisa e um filtro de categoria para produzir uma consulta.

combineLatest([term$, category$]).pipe(
  switchMap(([term, cat]) =>
    this.http.get('/api?q=' + term + '&cat=' + cat))
).subscribe(results => console.log(results));

forkJoin

forkJoin espera que todas as fontes se concluam e então emite um único array com os últimos valores delas. É o equivalente de RxJS a Promise.all.

import { forkJoin } from 'rxjs';

forkJoin({
  user: this.http.get('/api/user'),
  posts: this.http.get('/api/posts')
}).subscribe(({ user, posts }) => {
  console.log(user, posts);
});

Ressalva sobre forkJoin

forkJoin não emite nada se alguma fonte nunca for concluída (como um intervalo) ou apresentar um erro antes da conclusão. Use-o para fontes finitas, como solicitações HTTP.

mesclar

merge achata vários observables em um só, emitindo os valores à medida que chegam de qualquer fonte, sem emparelhá-los.

import { merge } from 'rxjs';

merge(clicks$, keypresses$).subscribe(
  event => console.log('event', event)
);
// emits whenever either source emits

zipar

zip emparelha valores pelo índice: emite o primeiro de cada fonte, depois o segundo de cada uma e assim por diante. Ele espera que todas as fontes produzam o próximo valor.

import { zip, of } from 'rxjs';

zip(of(1, 2, 3), of('a', 'b', 'c'))
  .subscribe(([n, l]) => console.log(n, l));
// [1,a], [2,b], [3,c]

startWith

startWith adiciona um valor inicial no início, o que é útil para que combineLatest possa emitir antes que todas as fontes tenham emitido.

import { startWith } from 'rxjs';

combineLatest([
  term$.pipe(startWith('')),
  category$.pipe(startWith('all'))
]).subscribe(([t, c]) => console.log(t, c));

withLatestFrom

withLatestFrom emite somente quando a fonte emite, anexando os valores mais recentes dos outros observables. A fonte conduz; os demais são passivos.

import { withLatestFrom } from 'rxjs';

saveClick$.pipe(
  withLatestFrom(formValue$)
).subscribe(([_, form]) => this.save(form));

concat para fluxos sequenciais

concat se inscreve em cada fonte na ordem, passando para a próxima somente depois que a atual for concluída. Use-o quando precisar que os fluxos sejam executados estritamente um após o outro.

import { concat, of } from 'rxjs';

concat(of(1, 2), of(3, 4))
  .subscribe(v => console.log(v));
// 1, 2, 3, 4 (second starts after first completes)

combineLatest versus forkJoin versus zip

combineLatest: o valor mais recente de cada fonte, a cada emissão.
forkJoin: o último valor de cada fonte, uma vez que todas sejam concluídas.
zip: valores emparelhados por índice.
Escolha com base no fato de precisar de atualizações contínuas, de uma combinação única ou de um emparelhamento estrito.

Verificação rápida

Teste sua compreensão dos operadores de combinação.

Recapitulação: operadores de combinação

Os operadores de combinação coordenam vários fluxos.

combineLatest: o valor mais recente de cada fonte a cada emissão.
forkJoin: combinação na conclusão (semelhante a Promise.all).
merge: intercala todas as emissões.
withLatestFrom: instantâneo dos demais, conduzido pela fonte.

A seguir: operadores de tratamento de erros.

Perguntas Frequentes

A aula “Operadores de combinação” é grátis?

Sim — o texto completo de “Operadores de combinação” é 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 “Operadores de combinação”?

Combine fluxos com combineLatest e forkJoin. 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 3 de 4.

Quanto tempo leva a aula “Operadores de combinação”?

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

← Voltar para Angular Academy