(CRUD de tu API) Aprende a manejar peticiones HTTP con RxJS y suscripciones correctamente | 12+1

Sobre esta lección

En este tutorial, exploraremos en detalle cómo Angular utiliza RxJS para gestionar peticiones HTTP de manera eficiente. Aprenderás qué son los Observables, cómo suscribirte a flujos de datos correctamente y cómo manejar errores para evitar fugas de memoria. Además, analizaremos la evolución de Angular hacia Signals y cuándo es más adecuado usar RxJS, Promises o Signals en distintos escenarios. Si alguna vez has tenido problemas con suscripciones que no se cancelan correctamente o no sabes cuándo utilizar subscribe en lugar de async pipe, este video resolverá todas tus dudas con ejemplos claros y prácticos. Además, exploraremos cómo optimizar el rendimiento utilizando operadores como takeUntil y takeUntilDestroyed, evitando así llamadas innecesarias a la API. Este video es clave si estás desarrollando aplicaciones Angular que consumen APIs y necesitas garantizar que las peticiones HTTP sean eficientes y manejadas de forma adecuada. ✨ Lo que aprenderás en este video: ✅ Introducción a RxJS y su importancia en Angular. 🧠 Cómo funcionan los Observables y por qué son diferentes a otras soluciones. ⚠️ Cómo suscribirte a peticiones HTTP sin generar fugas de memoria. 🔄 Manejo de errores en peticiones HTTP con catchError. ⚡ Comparativa entre RxJS, Promises y Signals en Angular. 💡 Uso correcto de async pipe para evitar suscripciones manuales. 🛠️ Cómo utilizar takeUntil y takeUntilDestroyed para mejorar la gestión de suscripciones. 📡 Ejemplos prácticos con HttpClient: GET, POST, PUT y DELETE correctamente implementados. 🔗 Índice de contenido con timestamps: 00:00 - Introducción: ¿Por qué necesitamos RxJS en Angular? 00:46 - Qué es RxJS y cómo funcionan los observables y observadores. 04:06 - Uso de RxJS en Angular con HttpClient. 04:20 - El problema de desubscripción (unsubscribe) de RxJS. 08:11 - Diferencias entre RxJS y otras opciones como Signals y Promises 10:50 - Configuración de HttpCliet en Angular 12:00 - Creación de la clase HeroServiceAbstract adaptada a HttpClient 17:00 - Carga de datos usando HttpClient 18:52 - Carga de datos: Async Pipe 23:12 - Manejo de errores en peticiones HTTP con catchError 24:14 - Crear nuevos héroes: HttpClient.post 25:12 - Operaciones asíncronas: subscribe, next, error y complete 26:40 - Implementando takeUntilDestroyed en Angular moderno 28:36 - Actualizar un Héroe: Operaciones PUT con obsevables 31:57 Método findOne con HttpClient y HeroDetailComponent. 37:35 - Actualizar héroes con HttpClient 39:40 - Actualizacion de las PowerStats usando httpClient 44:10 - Problema de la falta del estado de la aplicación (BehaviourSubject o signal) 45:50 - Eliminar héroe usando HttpClient y el verbo Delete. 49:35 - FindAll usando HttpClient 52:15 - Repaso de RxJS + HttpClient 52:55 - Conclusiones y mejores prácticas con RxJS ------------------- RECURSOS ------------------- 💻 Repositorio del proyecto: https://github.com/puntotech/angular-renaissance-fundamentals-workshop -----------------------------------------