0Pricing
Angular Academy · Lección

Observables y suscripciones

Cree y suscríbase a flujos de observables.

Observables y suscripciones 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é es un Observable

Un Observable es un flujo perezoso de valores a lo largo del tiempo. No sucede nada hasta que se suscribe. Puede emitir cero o más valores y, después, completarse o producir un error.

RxJS es la biblioteca reactiva que Angular incluye para gestionar tareas asíncronas como solicitudes HTTP, eventos y temporizadores.

Crear un Observable

El constructor de Observable recibe una función de suscriptor. Llame a next() para emitir un valor, a complete() para finalizar y a error() para indicar un error.

import { Observable } from 'rxjs';

const numbers$ = new Observable<number>(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

Suscribirse

Suscribirse inicia la ejecución. Pase un observador con controladores next, error y complete.

numbers$.subscribe({
  next: v => console.log('value', v),
  error: err => console.error(err),
  complete: () => console.log('done')
});
// value 1, value 2, value 3, done

Los Observables son perezosos

La función de suscriptor no se ejecuta hasta que se llama a subscribe(). Cada suscripción inicia una ejecución nueva e independiente (observable frío).

const tick$ = new Observable(s => {
  console.log('executing');
  s.next(Date.now());
});
// "executing" is NOT logged until subscribe() runs

Ayudantes de creación: of y from

Rara vez se utiliza el constructor. Los ayudantes como of y from permiten crear Observables rápidamente.

import { of, from } from 'rxjs';

of(10, 20, 30).subscribe(v => console.log(v)); // 10 20 30
from([1, 2, 3]).subscribe(v => console.log(v)); // 1 2 3
from(fetch('/api')).subscribe(res => console.log(res));

Los creadores interval y timer

interval emite números incrementales según un intervalo programado; timer espera y después emite un valor.

import { interval, timer } from 'rxjs';

interval(1000).subscribe(n => console.log('tick', n));
// 0, 1, 2, ... every second

timer(2000).subscribe(() => console.log('after 2s'));

HttpClient devuelve Observables

En Angular, los métodos de HttpClient devuelven Observables. La solicitud solo se envía cuando se suscribe.

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const http = inject(HttpClient);
http.get('/api/users').subscribe(users => console.log(users));

El objeto Subscription

subscribe() devuelve una Subscription. Llame a unsubscribe() para dejar de recibir valores y liberar recursos.

import { interval } from 'rxjs';

const sub = interval(1000).subscribe(n => console.log(n));
// later
sub.unsubscribe(); // stops the stream

Finalización frente a cancelación de la suscripción

Cuando un observable ejecuta complete() o error(), libera sus recursos automáticamente. En los flujos infinitos (intervalos y eventos del DOM), debe cancelar la suscripción manualmente.

Forma abreviada del observador

Si solo le interesan los valores, pase una única función: se convertirá en el controlador de next.

of(1, 2, 3).subscribe(v => console.log(v));
// equivalent to { next: v => console.log(v) }

Hot frente a cold (breve)

Los observables fríos comienzan a producir valores al suscribirse y cada suscriptor obtiene su propia ejecución (HTTP, of, interval). Los observables calientes producen valores independientemente de los suscriptores y los comparten (a continuación conocerá los Subjects).

Comprobación rápida

Compruebe lo que ha aprendido sobre los observables.

Resumen: Observables y suscripciones

Un Observable es un flujo perezoso que se activa con subscribe().

  • Emita con next, finalice con complete y produzca un error con error.
  • Los métodos de HttpClient devuelven observables: se ejecutan al suscribirse.
  • Cancele las suscripciones a flujos infinitos para evitar fugas.

Siguiente: Subjects y BehaviorSubject.

Preguntas frecuentes

¿La lección «Observables y suscripciones» es gratis?

Sí — el texto completo de «Observables y suscripciones» 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 «Observables y suscripciones»?

Cree y suscríbase a flujos de observables. 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 «Observables y suscripciones»?

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

  1. Observables y suscripciones
  2. Subjects y BehaviorSubject
  3. Cancelación de suscripciones y fugas de memoria
  4. El pipe async
← Volver a Angular Academy