Angular Academy · Lección

Operadores de transformación

Utilice map, switchMap, mergeMap y concatMap.

Operadores de transformación es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Qué son los operadores

Los operadores son funciones que se combinan dentro de .pipe() para transformar un flujo. Los operadores de transformación cambian cada valor emitido o aplanan observables internos para incluirlos en la salida.

map

map transforma cada valor emitido, como Array.map, pero a lo largo del tiempo.

import { of, map } from 'rxjs';

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

Por qué utilizar el mapeo de orden superior

Cuando cada valor activa otro observable (por ejemplo, una llamada HTTP), obtiene un observable de observables. Los operadores de aplanamiento (switchMap, mergeMap, concatMap) se suscriben al observable interno y emiten sus valores.

switchMap

switchMap cancela el observable interno anterior cuando llega un valor nuevo. Es perfecto para las búsquedas predictivas: las solicitudes anteriores se descartan.

import { switchMap } from 'rxjs';

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

mergeMap

mergeMap (alias flatMap) ejecuta los observables internos simultáneamente y combina todas sus emisiones. No se cancela ninguno.

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 pone en cola los observables internos y los ejecuta uno a la vez y en orden, esperando a que cada uno finalice. Utilícelo cuando el orden sea importante.

import { concatMap } from 'rxjs';

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

exhaustMap

exhaustMap ignora los valores nuevos mientras se ejecuta un observable interno. Es ideal para evitar envíos duplicados al hacer clic en un botón.

import { exhaustMap } from 'rxjs';

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

Elegir el operador de aplanamiento adecuado

switchMap: cancela el anterior (búsquedas).
mergeMap: todos en paralelo (escrituras independientes).
concatMap: ordenados, uno tras otro (guardados secuenciales).
exhaustMap: ignora valores mientras está ocupado (botón de inicio de sesión).

switchMap y la cancelación

Como switchMap cancela los observables internos en curso, también cancela la suscripción a la solicitud HTTP subyacente, lo que Angular traduce en una solicitud abortada y permite ahorrar ancho de banda.

Combinar map con un operador de aplanamiento

A menudo se utiliza map para extraer datos después del aplanamiento.

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

Evitar las suscripciones anidadas

No se suscriba nunca dentro de otra suscripción. Utilice en su lugar un operador de aplanamiento: mantiene el flujo declarativo y gestiona correctamente la limpieza.

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

Comprobación rápida

Compruebe su comprensión de los operadores de transformación.

Repaso: operadores de transformación

map transforma valores; los operadores de aplanamiento gestionan observables internos.

switchMap: cancela el anterior.
mergeMap: en paralelo.
concatMap: secuencial y ordenado.
exhaustMap: ignora mientras está ocupado.

Siguiente: operadores de filtrado.

Preguntas frecuentes

¿La lección «Operadores de transformación» es gratis?

Sí — el texto completo de «Operadores de transformación» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Operadores de transformación»?

Utilice map, switchMap, mergeMap y concatMap. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Operadores de transformación»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy