Angular Academy · Lección

Operadores de combinación

Combine flujos con combineLatest y forkJoin.

Operadores de combinación es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 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.

Por qué combinar streams

Las aplicaciones reales coordinan varias fuentes asíncronas: varias llamadas HTTP, el valor de un formulario junto con un filtro, o un clic junto con el estado más reciente. Los operadores de combinación fusionan varios observables en uno.

combineLatest

combineLatest emite un array con el valor más reciente de cada fuente cada vez que emite cualquier fuente, después de que todas hayan emitido al menos una 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

Es ideal para estados de UI derivados: combine un término de búsqueda y un filtro de categoría para generar una consulta.

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

forkJoin

forkJoin espera a que todas las fuentes se completen y después emite un array con sus últimos valores. Es el 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);
});

Advertencia sobre forkJoin

forkJoin no emite nada si alguna fuente nunca se completa (como un intervalo) o produce un error antes de completarse. Úselo con fuentes finitas, como las solicitudes HTTP.

merge

merge aplana varios observables en uno y emite los valores a medida que llegan de cualquier fuente, sin emparejarlos.

import { merge } from 'rxjs';

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

zip

zip empareja los valores por índice: emite el primero de cada fuente, después el segundo de cada una, y así sucesivamente. Espera a que todas las fuentes produzcan el siguiente 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 antepone un valor inicial, lo que resulta útil para que combineLatest pueda emitir antes de que todas las fuentes hayan emitido.

import { startWith } from 'rxjs';

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

withLatestFrom

withLatestFrom emite solo cuando emite la fuente, incorporando los valores más recientes de los otros observables. La fuente dirige el proceso; los demás son pasivos.

import { withLatestFrom } from 'rxjs';

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

concat para streams secuenciales

concat se suscribe a cada fuente en orden y pasa a la siguiente solo cuando termina la actual. Úselo cuando necesite que los streams se ejecuten estrictamente uno después de otro.

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 frente a forkJoin y zip

combineLatest: el último valor de cada fuente, ante cualquier emisión.
forkJoin: el último valor de cada fuente, una vez que todas se completan.
zip: valores emparejados por índice.
Elija según necesite actualizaciones continuas, una combinación única o un emparejamiento estricto.

Comprobación rápida

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

Repaso: operadores de combinación

Los operadores de combinación coordinan varios streams.

combineLatest: el último valor de cada fuente ante cualquier emisión.
forkJoin: combinación al completarse (similar a Promise.all).
merge: intercala todas las emisiones.
withLatestFrom: instantánea de los demás dirigida por la fuente.

Siguiente: operadores de gestión de errores.

Preguntas frecuentes

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

Sí — el texto completo de «Operadores de combinació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 combinación»?

Combine flujos con combineLatest y forkJoin. 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 3 de 4.

¿Cuánto tiempo toma la lección «Operadores de combinació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