Creation Functions

En RxJS, existen dos formas diferentes: Creation Functions para crear Observables y Pipeable Operators para convertir Observables existentes.

Esta página describe los conceptos básicos de las Creation Functions y las siete categorías principales.

¿Qué son las Creation Functions?

Las Creation Functions son funciones para crear nuevos Observables.

import { of, from, interval } from 'rxjs';

// Uso como Creation Functions
const obs1$ = of(1, 2, 3);
const obs2$ = from([4, 5, 6]);
const obs3$ = interval(1000);

Se importan directamente del paquete rxjs y se llaman como funciones para crear Observables.

Diferencia con Pipeable Operator

Las Creation Functions y los Pipeable Operators tienen diferentes usos y aplicaciones. Consulte la tabla a continuación para ver las diferencias entre ellos.

Característica	Creation Function	Pipeable Operator
Propósito	Crear nuevo Observable	Transformar Observable existente
Importar de	rxjs	rxjs/operators
Uso	Llamar directamente como función	Usar dentro de .pipe()
Ejemplo	concat(obs1$, obs2$)	obs1$.pipe(concatWith(obs2$))

Ejemplo de Creation Function

Las Creation Functions se utilizan para combinar directamente múltiples Observables.

import { concat, of } from 'rxjs';

const obs1$ = of(1, 2, 3);
const obs2$ = of(4, 5, 6);

// Uso como Creation Function
concat(obs1$, obs2$).subscribe(console.log);
// Salida: 1, 2, 3, 4, 5, 6

Ejemplo de Pipeable Operator

El Pipeable Operator se utiliza para agregar un proceso de conversión a un Observable existente.

import { of } from 'rxjs';
import { concatWith } from 'rxjs';

const obs1$ = of(1, 2, 3);
const obs2$ = of(4, 5, 6);

// Uso como Pipeable Operator
obs1$.pipe(
  concatWith(obs2$)
).subscribe(console.log);
// Salida: 1, 2, 3, 4, 5, 6

Criterios de uso

La elección entre Creation Function y Pipeable Operator se determina según los siguientes criterios.

Cuándo se debe usar Creation Function

La Creation Function es adecuada cuando se van a operar múltiples Observables al mismo nivel o cuando se va a crear un Observable desde cero.

• Cuando se combinan múltiples Observables al mismo nivel

  concat(obs1$, obs2$, obs3$)
  merge(click$, hover$, scroll$)

• Cuando se crea un Observable desde cero

  of(1, 2, 3)
  from([1, 2, 3])
  interval(1000)

Cuándo se debe usar Pipeable Operator

El Pipeable Operator es adecuado para agregar procesamiento a un Observable existente o para encadenar múltiples operaciones.

• Cuando se agregan operaciones a un Observable existente

  obs1$.pipe(
    map(x => x * 2),
    concatWith(obs2$),
    filter(x => x > 5)
  )

• Cuando se encadenan múltiples operaciones como pipeline

Categorías de Creation Functions

En este capítulo, las Creation Functions se dividen en siete categorías.

Lista de todas las categorías

En la tabla a continuación, puede ver todas las categorías y las funciones que contienen. Haga clic en cada nombre de función para ir a la página de detalle.

Categoría	Descripción	Funciones principales	Casos de uso típicos
Creación básica	Funciones más básicas y frecuentemente utilizadas. Crear Observables basados en datos, array, eventos y tiempo	of, from, fromEvent, interval, timer	Pruebas con valores fijos, streaming de datos existentes, manejo de eventos DOM, polling, ejecución retardada
Generación de bucles	Expresar procesamiento de bucles como sentencias for/while en Observable	range, generate	Generación de números secuenciales, procesamiento por lotes, transiciones de estado complejas, cálculos matemáticos
Comunicación HTTP	Manejar comunicación HTTP como Observable	ajax, fromFetch	Comunicación HTTP basada en XMLHttpRequest, comunicación HTTP basada en Fetch API, llamadas a REST API
Combinación	Combinar múltiples Observables en uno. El tiempo de emisión y el orden difieren según el método de combinación	concat, merge, combineLatest, zip, forkJoin	Procesamiento paso a paso, integración de múltiples eventos, sincronización de entradas de formularios, espera de finalización de llamadas API paralelas
Selección/Partición	Seleccionar uno de múltiples Observables o particionar un Observable en múltiples	race, partition	Competencia entre múltiples fuentes de datos, ramificación éxito/fallo
Condicional	Seleccionar Observable basado en condiciones o generar dinámicamente en tiempo de suscripción	iif, defer	Ramificación de procesamiento basada en estado de inicio de sesión, creación dinámica de Observable, evaluación perezosa
Control	Controlar el tiempo de ejecución del Observable y la gestión de recursos	scheduled, using	Control de tiempo de ejecución con scheduler, gestión del ciclo de vida de recursos, prevención de fugas de memoria

TIP

Orden de aprendizaje

Recomendamos que los principiantes aprendan en el siguiente orden:

1. Creación básica - Funciones fundamentales de RxJS
2. Combinación - Conceptos básicos del manejo de múltiples streams
3. Comunicación HTTP - Integración práctica de API
4. Otras categorías - Aprender según sea necesario

Correspondencia con Pipeable Operator

Muchas Creation Functions tienen un Pipeable Operator correspondiente. Cuando se usan en un pipeline, use un operador de la familia ~With.

Creation Function	Pipeable Operator	Notas
concat(a$, b$)	a$.pipe(concatWith(b$))	RxJS 7+
merge(a$, b$)	a$.pipe(mergeWith(b$))	RxJS 7+
zip(a$, b$)	a$.pipe(zipWith(b$))	RxJS 7+
combineLatest([a$, b$])	a$.pipe(combineLatestWith(b$))	RxJS 7+
race(a$, b$)	a$.pipe(raceWith(b$))	RxJS 7+

NOTE

Desde RxJS 7, se han agregado concatWith, mergeWith, zipWith, combineLatestWith, raceWith y otros operadores de tipo ~With, facilitando su uso como Pipeable Operator.

¿Cuál debo usar?

La elección entre Creation Function y Pipeable Operator depende del contexto.

Se recomienda Creation Function

Si se van a operar múltiples Observables al mismo nivel, la Creation Function simplificará el código.

// ✅ Combinar múltiples Observables al mismo nivel
const combined$ = merge(
  fromEvent(button1, 'click'),
  fromEvent(button2, 'click'),
  fromEvent(button3, 'click')
);

Se recomienda Pipeable Operator

Cuando se agregan operaciones como parte de un pipeline, use Pipeable Operator para aclarar el flujo de procesamiento.

// ✅ Combinar como parte del pipeline
const result$ = source$.pipe(
  map(x => x * 2),
  mergeWith(other$),
  filter(x => x > 10)
);

Resumen

• Creation Functions: Funciones para crear y combinar Observables
• Pipeable Operators: Funciones para convertir Observables existentes
• Las Creation Functions se dividen en 7 categorías:
  1. Creación básica: Crear Observables basados en datos, array, eventos y tiempo
  2. Generación de bucles: Expresar procesamiento iterativo en Observable
  3. Comunicación HTTP: Manejar comunicación HTTP como Observable
  4. Combinación: Combinar múltiples en uno
  5. Selección/Partición: Seleccionar o particionar
  6. Condicional: Generar dinámicamente según condiciones
  7. Control: Controlar tiempo de ejecución y gestión de recursos
• Usar Pipeable Operators de la familia ~With en pipelines
• Cada categoría contiene múltiples funciones y puede usarse de diferentes maneras según la aplicación

Próximos pasos

Para obtener más información sobre cada categoría, siga los enlaces a continuación:

1. Creation Functions básicas - of, from, fromEvent, interval, timer
2. Funciones de generación de bucles - range, generate
3. Funciones de comunicación HTTP - ajax, fromFetch
4. Funciones de combinación - concat, merge, combineLatest, zip, forkJoin
5. Funciones de selección/partición - race, partition
6. Funciones condicionales - iif, defer
7. Funciones de control - scheduled, using

En cada página, aprenderá más sobre cómo funcionan las Creation Functions y ejemplos prácticos.

Recursos de referencia

• Documentación oficial de RxJS - Creation Functions
• Learn RxJS - Creation Operators