Manejo de errores y transformación de datos: Breve introducción a RxJS

Servicios en Angular (IV)

Rodrigo Bosarreyes
3 min readSep 2, 2023

Imagina que estás pidiendo algo a un amigo y estás esperando una respuesta. En Angular, cuando haces una solicitud a un servidor usando HttpClient, obtienes una “promesa” de respuesta. Pero en lugar de ser una respuesta directa, lo que obtienes es un “Observable”.

Un Observable es como un mensajero que te trae la respuesta de tu amigo, pero no de inmediato. Puede llevar un tiempo. Mientras tanto, puedes hacer otras cosas sin esperar a que vuelva el mensajero. Cuando la respuesta esté lista, el Observable te la entregará.

Pero el mundo es más complicado y a veces las cosas no van según lo planeado. Puede haber errores en el camino. Por ejemplo, tu amigo podría olvidar lo que le pediste. En Angular, RxJS es como un experto en manejo de errores. Puede ayudarte a lidiar con situaciones difíciles y decidir qué hacer si algo sale mal.

También puedes pensar en RxJS como un mago que transforma las respuestas. Supongamos que le pides a tu amigo un pastel y él te trae los ingredientes. Pero tú quieres el pastel ya hecho. Entonces, RxJS puede “cocinar” esos ingredientes y entregarte el pastel terminado.

Los operadores de RxJS más utilizados en Angular son:

  • map(): Este operador se usa para transformar los valores de un Observable en otros valores. Por ejemplo, si tienes una lista de números y quieres multiplicar cada número por 2, puedes usar map().
Ejemplo del operador map
  • filter(): Este operador filtra los valores de un Observable según una condición. Por ejemplo, si tienes una lista de números y solo quieres los números pares, puedes usar filter().
Ejemplo del operador filter
  • merge(): Este operador combina varios Observables en uno solo. Los valores se emiten en el orden en que se reciben de todos los Observables.
Ejemplo del operador merge
  • catchError(): Este operador maneja errores en un Observable y permite tomar medidas cuando ocurren. Puedes proporcionar una función para manejar el error y devolver un nuevo Observable.
Ejemplo del operador catchError

--

--