Angular 21 de Cero a Experto / RxJS y observables a gran escala

Reto: un buscador reactivo desde cero

Reto40 min100 XP

Este reto corona el módulo de RxJS: vas a construir un buscador reactivo COMPLETO desde cero —con debounce, cancelación de peticiones obsoletas y manejo de errores—, implementando tú mismo la mecánica de debounceTime y switchMap. Cuando funcione, entenderás por dentro el patrón más importante de RxJS, el que hace usables las búsquedas en vivo y el autocompletado de toda app profesional.

Reto

Debounce + switchMap + catchError, construidos a mano

Difícil40 min100 XP(×2 sin mirar la solución)

Qué debes construir

Un Buscador que reciba términos (como el valueChanges de un input) y, por cada término:

Debounce: espere a que el usuario deje de teclear (~300ms) antes de buscar.
Ignore lo trivial: términos de menos de 2 caracteres y repeticiones del anterior.
switchMap (cancelación): al llegar un término nuevo, CANCELE la búsqueda anterior en curso —solo importa el resultado del último término—.
catchError: si una búsqueda falla, devuelva resultados vacíos sin romper el buscador (los siguientes términos deben seguir funcionando).

Simula la "API" con una función asíncrona que tarda un tiempo variable y a veces falla.

Reglas

Implementa el debounce y la cancelación tú mismo (nada de importar RxJS).
El buscador debe seguir vivo tras un error (no "morir" con el primer fallo).
Demuestra la cancelación: una búsqueda lenta seguida de una rápida → solo se usa la última.

40:00

Cuando estés listo, arranca el reloj.

El razonamiento. Este patrón combina tres protecciones que resuelven tres problemas distintos: el DEBOUNCE evita disparar en cada tecla (rendimiento); la CANCELACIÓN por generación evita el bug de resultados desordenados —una petición vieja y lenta que llega tarde y sobrescribe la correcta—; y el CATCHERROR evita que un fallo de red mate el buscador. En RxJS real, debounceTime + distinctUntilChanged + switchMap + catchError te dan esto en cinco líneas; aquí lo construyes a mano para ver la mecánica que hay debajo. El "token de generación" es exactamente cómo switchMap sabe qué resultado es obsoleto: es la misma idea de la "bandera ignorar" y el AbortController que usaste en React (SC-06 M03), formalizada.

Qué observar al ejecutar:

Debounce: teclear c → ca → caf rápido dispara UNA sola búsqueda (la de "caf"); las intermedias se cancelan con clearTimeout.
Cancelación: "car" (600ms) empieza, y antes de que vuelva llega "cer" (100ms). Cuando la respuesta lenta de "car" finalmente llega, su generación ya no es la actual → se descarta. La pantalla nunca muestra resultados obsoletos.
Error: "bus" falla (500) → el buscador emite [] y sigue vivo; "cine" a continuación funciona normal. Un fallo no mata el stream.

Estas tres protecciones son EXACTAMENTE lo que RxJS te da con debounceTime(300), distinctUntilChanged(), switchMap(...) y catchError(() => of([])). Ahora que las construiste a mano, esos operadores dejan de ser magia: sabes qué problema resuelve cada uno y por qué el orden importa.

Qué sigue

Dominas RxJS de arriba a abajo, y lo conectaste con señales. Tienes todas las herramientas reactivas de Angular. El próximo módulo las pone al servicio de los datos remotos: HttpClient y el manejo de datos —peticiones, interceptores funcionales, caché, estados de carga y httpResource—. Vas a conectar "Mi Bolsillo" con un backend de verdad.