Consumir API REST con
HTML-код
- Опубликовано: 30 июл 2024
- En este vídeo te enseño cómo conectar o consumir API REST desde tu aplicación con Angular 17 como todo un PRO usando manejo de errores e interceptors para centralizar tu código y hacerlo mantenible.
Contenido del vídeo
================
- 00:00 - Introducción
- 00:31 - Estructura de la app
- 01:40 - Creando y registrando el service
- 03:03 - Llamando a la API desde el service
- 05:33 - Llamando al service desde el componente
- 11:48 - Agregando manejo de errores
- 17:05 - Interceptors
- 19:52 - Implementando un interceptor
- 23:58 - Agregando variables de entorno
- 26:40 - Resumen y conclusiones
Enlaces de interés
===============
- Lista de reproducción con contenido de Angular: • Angular
- Repositorio con el código: github.com/pedrovelasquez9/an...
- Únete a las otras redes de la comunidad de Programación en español: programacion-es.dev/redes/
Conviértete en miembro de este canal para disfrutar de ventajas, sorteos exclusivos dentro de la comunidad y un badge con tu imagen de perfil en la web de Programación en español:
/ @programacion-es
Que buena forma de resumir conceptos!
Muchas gracias por compartir tus conocimientos.
Muchas gracias a ti por comentar!! Un saludo y que tengas buen código!
Gracias por tus videos que son muy útil para mí. Explicas todo muy bien.
Mil gracias!!!
Excelente video. Muchas gracias por estos vídeos.
Mil gracias a ti por comentar, me anima un montón a seguir grabando vídeos de estos temas, un saludo y que tengas buen código!!
Acabo de descubrir tu canal, excelente video, muchas gracias por las explicaciones!... Liked!, Subscribed!
Muchas graciaaaaas!! Me alegra que te haya sido útil, un saludo y que tengas buen código!!
excelente, me ha ayudado mucho. Gracias (Desde Colombia)
Esoooo, me alegra un montón que te haya sido útil, un saludo y que tengas buen código!!
Muchas gracias por el video, comencé a estudiar Angular hace 1 semana, mi nivel de español es básico y aun así logré integrar una API meteorológica principalmente gracias a tu ayuda. Gracias de nuevo, aprendí mucho mientras miraba el video 3 veces para conocer los detalles y solucionar los errores. Buenos estudios para todos.
Muchísimas gracias por tu comentario!!! Me alegra un montón saber que te ha sido útil el vídeo, un gran saludo y que tengas buen código!!
Genial! muy claro
Mil gracias!!
excelente video, se entiende muy bien el concepto
Grandeeee, me alegra un montón que te haya sido útil =)
muchas gracias, este tutorial es perfecto
Mil gracias!!
excelente contenido, yo normalmente implemento estrategias de gestion de errores para que la aplicacion no deje de funcionar o al menos hacer todo lo que podamos, por un lado se puede seguir el replace strategy
, el rethrow strategy
y el retry strategy (reintentar n veces la llamada al servidor)
Grandeeeee, gracias por el aporte, justo tengo planeado algún vídeo de operadores útiles de rxjs, me anoto agregar estos =)
excelente video, muy bueno . Podrías hacer un video haciendo una conexión a una base de datos en mysql o postgresql.
Claro! Tienes uno donde lo hago con Java + postgresql y Docker aquí: ruclips.net/video/uqBZEL9m2V4/видео.html también hay uno con nodejs + mongoDB, me anoto grabar uno con node, express y postgresql o mysql =)
Genial Video!
Mil gracias!!
Excelente, Messirve para la integracion de servicios que estoy haciendo actualmente! (aguante LOTR)
Esooooo!!
Muy bueno el video, tambien seria interesante hacer los tests de rxjs, por ejemplo con jest, para ver como se harian.
Me anoto una serie de testing para cubrir servicios y componentes =)
excelente muchas gracias, podrias hacer un ejemplo de esto mismo, usando signals?
Si! Pronto se vienen vídeos con temas de signals =)
Buen video, como utilizarias interceptors con peticiones a una api Graphql?
Échale un ojo a este gist con un ejemplo de interceptor usando Apollo Angular gist.github.com/Supamiu/354030d8fc09b93437985cdefe88d345
🤣🤣 juraba que era Leifer Mendez
jejeje en mi caso pase de angular 15 a 17 y wou gran cambio ee...
no me he enterado de nada, pero gracias por el aporte
Poco a poco, tienes otros vídeos más introductorios a conceptos de Angular en el canal por si les quieres echar un ojo 😎🤘👨💻
Gracias, muy bien explicado.
En este ejercicio importamos el environment.development. Angular durante el proceso del build hace el reemplazo de ese archivo como indicamos en el angular.json, pero que pasa si importo de environment, me refiero a hay alguna diferecia? (hice la prueba y seguia funcionando, pero quiero saber mas a fondo si sabes que pasa, no sabria como buscar)
Gracias
Al final los environments los pone angular para poder tener la configuración por entorno, pero si tienes una config para todo e importas directamente un environment en dev y prod con la misma configuración, servirá, no tendrás la separación, pero no evitará que funcione. Al final depende de ti y cómo organices los entornos y config de tu app =)
Cuál tipografía y tema de VSCode es el que utilizas?
La fuente es comic mono y el tema Palenight =)
¿Aún es necesario declarar la variable production: true en el environment? Creí que Angular ya optimizaba sin necesidad de la variable, y sin tener que usar --prod ... Y gracias! Excelente contenido!
Si, a partir de la v17 por defecto hace el build para prod y puedes tener otras configuraciones custom si lo necesitas, por ejemplo, para dev =)
Hola muy buen video. Tengo. una duda ¿Si quiero manejar errores customizados para cada o servicio, esto deberia ir en el servicio en lugar de un interceptor general? o ¿Se pueden crear interceptors a nivel de componente?
Saludos.
Podrías validar cada caso en el service que corresponda y tener, por ejemplo, centralizado un sistema de notificaciones para el usuario para que no repitas errores comunes en componentes también =)
@@programacion-es Muchas gracias. Saludos.
Explore el canal no encontre o no vi si cuantas con algun video que enseñe el paso de hacer login usando httpclient en el angular 17 teniendo un backend que nos devuelve token en un post. Gracias!
que dificultad tienes?
Me lo anoto para grabarlo =)
@@jhonandersonperaltaochoa9833 gracias! Mas que duda era sobre querer escuchar la version de como interpreta este tema de esa conexión para login, token refresh, usar local storage y como lo explicaría, me gustan sus apuntes. Gracias por tú interés!
Qué diferencia hay entre los interceptors y los guards?
Los interceptors interceptan las llamadas http para poder modificarlas de forma centralizada y agregar validaciones, headers, etc. Los guards añaden validaciones, lógica o lo que necesites al navegar por las rutas de tu aplicación, tienes un vídeo de guards aquí: ruclips.net/video/ODIw02GU9r0/видео.html
Tengo dudas sobre el tema de cachear las llamadas a la API para mejorar el rendimiento y evitar llamadas innecesarias. Como es el flujo de como sabe angular que esa data fue cambiada y volver a hacer la llamada. Un interceptor para el tema de la gestion de la cache tiene sentido? Que de dudas 😅
Puedes hacerlo con un interceptor y elegir qué llamadas deberían ser cacheadas y qué llamadas no y almacenar la data del response en un service o, incluso en el sessionStorage. Para controlar el refresh de la cache, puedes definir un tiempo de validez y validar que, pasado ese tiempo, se vuelva a hacer la llamada a la API y se actualice la cache, por eso se recomienda cachear aquello que sabes que no cambia o que cambia muy poco en el tiempo.
@@programacion-es gracias!! Donde puedo aprender más sobre este tema y que estrategias seguir para esos casos?
Por favor, puede hacer zoom al VSCode? Soy miope 😢
También tienes el código en el repositorio, el enlace en la descripción del vídeo =)
Como hace para tener esa tipografia en Visual Code?
Aquí te muestro cómo: ruclips.net/user/shortsfbVuf69bjdA?feature=share
@@programacion-es gracias maestro!
vengo de react y usaba Axios, quede asi O.o