Angular Academy · Aula

Operadores de transformação

Use map, switchMap, mergeMap e concatMap.

Operadores de transformação é 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 são operadores

Operadores são funções que você compõe dentro de .pipe() para transformar um fluxo. Operadores de transformação alteram cada valor emitido ou nivelam observáveis internos na saída.

map

map transforma cada valor emitido, como Array.map, mas ao longo do tempo.

import { of, map } from 'rxjs';

of(1, 2, 3).pipe(
  map(n => n * 10)
).subscribe(v => console.log(v)); // 10, 20, 30

Por que usar mapeamento de ordem superior

Quando cada valor aciona outro observável, como uma chamada HTTP, você obtém um observável de observáveis. Operadores de nivelamento (switchMap, mergeMap, concatMap) fazem a inscrição no observável interno e emitem seus valores.

switchMap

switchMap cancela o observável interno anterior quando chega um novo valor. É perfeito para pesquisas enquanto você digita — as solicitações antigas são descartadas.

import { switchMap } from 'rxjs';

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term))
).subscribe(results => console.log(results));

mergeMap

mergeMap (também chamado de flatMap) executa observáveis internos simultaneamente e combina todas as suas emissões. Nada é cancelado.

import { mergeMap } from 'rxjs';

ids$.pipe(
  mergeMap(id => this.http.get('/api/item/' + id))
).subscribe(item => console.log(item));
// all requests run in parallel

concatMap

concatMap coloca os observáveis internos em uma fila e os executa um de cada vez, na ordem, aguardando a conclusão de cada um. Use-o quando a ordem for importante.

import { concatMap } from 'rxjs';

saveQueue$.pipe(
  concatMap(payload => this.http.post('/api/save', payload))
).subscribe();
// requests run sequentially, in order

exhaustMap

exhaustMap ignora novos valores enquanto um observável interno ainda está em execução. É excelente para evitar envios duplicados ao clicar em um botão.

import { exhaustMap } from 'rxjs';

submitClicks$.pipe(
  exhaustMap(() => this.http.post('/api/login', creds))
).subscribe();
// extra clicks ignored until request finishes

Escolhendo o nivelador certo

switchMap: cancela o anterior (pesquisa).
mergeMap: todos em paralelo (gravações independentes).
concatMap: ordenados, um por vez (gravações sequenciais).
exhaustMap: ignora enquanto está ocupado (botão de login).

switchMap e cancelamento

Como switchMap cancela observáveis internos em andamento, ele também cancela a inscrição na solicitação HTTP subjacente, o que o Angular traduz em uma solicitação abortada — economizando largura de banda.

Combinando map com um nivelador

É comum usar map para extrair dados depois do nivelamento.

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term)),
  map(res => res.items)
).subscribe(items => console.log(items));

Evite inscrições aninhadas

Nunca faça uma inscrição dentro de outra inscrição. Em vez disso, use um operador de nivelamento — ele mantém o fluxo declarativo e gerencia a limpeza corretamente.

// BAD:
// outer$.subscribe(v => inner$(v).subscribe(...));
// GOOD:
// outer$.pipe(switchMap(v => inner$(v))).subscribe(...);

Verificação rápida

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

Recapitulação: operadores de transformação

map transforma valores; os operadores de achatamento lidam com observables internos.

switchMap: cancela o anterior.
mergeMap: em paralelo.
concatMap: sequencial e ordenado.
exhaustMap: ignora enquanto está ocupado.

A seguir: operadores de filtragem.

Perguntas Frequentes

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

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

Use map, switchMap, mergeMap e concatMap. 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 “Operadores de transformaçã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