Consumir API REST con
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
Пікірлер: 49
Que buena forma de resumir conceptos! Muchas gracias por compartir tus conocimientos.
@programacion-es
5 ай бұрын
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.
@programacion-es
4 ай бұрын
Mil gracias!!!
Excelente video. Muchas gracias por estos vídeos.
@programacion-es
5 ай бұрын
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!!
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.
@programacion-es
3 ай бұрын
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!!
excelente, me ha ayudado mucho. Gracias (Desde Colombia)
@programacion-es
5 ай бұрын
Esoooo, me alegra un montón que te haya sido útil, un saludo y que tengas buen código!!
Acabo de descubrir tu canal, excelente video, muchas gracias por las explicaciones!... Liked!, Subscribed!
@programacion-es
Ай бұрын
Muchas graciaaaaas!! Me alegra que te haya sido útil, un saludo y que tengas buen código!!
Genial! muy claro
@programacion-es
4 ай бұрын
Mil gracias!!
excelente video, muy bueno . Podrías hacer un video haciendo una conexión a una base de datos en mysql o postgresql.
@programacion-es
5 ай бұрын
Claro! Tienes uno donde lo hago con Java + postgresql y Docker aquí: kzread.info/dash/bejne/p6V2vKeFadCYhpc.html también hay uno con nodejs + mongoDB, me anoto grabar uno con node, express y postgresql o mysql =)
Genial Video!
@programacion-es
4 ай бұрын
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)
@programacion-es
3 ай бұрын
Grandeeeee, gracias por el aporte, justo tengo planeado algún vídeo de operadores útiles de rxjs, me anoto agregar estos =)
Excelente, Messirve para la integracion de servicios que estoy haciendo actualmente! (aguante LOTR)
@programacion-es
5 ай бұрын
Esooooo!!
🤣🤣 juraba que era Leifer Mendez
jejeje en mi caso pase de angular 15 a 17 y wou gran cambio ee...
excelente muchas gracias, podrias hacer un ejemplo de esto mismo, usando signals?
@programacion-es
4 ай бұрын
Si! Pronto se vienen vídeos con temas de signals =)
Buen video, como utilizarias interceptors con peticiones a una api Graphql?
@programacion-es
5 ай бұрын
Échale un ojo a este gist con un ejemplo de interceptor usando Apollo Angular gist.github.com/Supamiu/354030d8fc09b93437985cdefe88d345
no me he enterado de nada, pero gracias por el aporte
@programacion-es
2 ай бұрын
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
@programacion-es
Ай бұрын
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?
@programacion-es
4 ай бұрын
La fuente es comic mono y el tema Palenight =)
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!
@jhonandersonperaltaochoa9833
Ай бұрын
que dificultad tienes?
@programacion-es
Ай бұрын
Me lo anoto para grabarlo =)
@CesarSpiff
Ай бұрын
@@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!
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.
@programacion-es
2 ай бұрын
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 =)
@vicxaam90
2 ай бұрын
@@programacion-es Muchas gracias. Saludos.
Qué diferencia hay entre los interceptors y los guards?
@programacion-es
Ай бұрын
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í: kzread.info/dash/bejne/gXh92ZJrd7ifopM.html
Por favor, puede hacer zoom al VSCode? Soy miope 😢
@programacion-es
11 күн бұрын
También tienes el código en el repositorio, el enlace en la descripción del vídeo =)
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 😅
@programacion-es
2 ай бұрын
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.
@code1866
2 ай бұрын
@@programacion-es gracias!! Donde puedo aprender más sobre este tema y que estrategias seguir para esos casos?
vengo de react y usaba Axios, quede asi O.o