Cómo CONSUMIR una API REST con JAVASCRIPT y Fetch + Promises con gestión de Errores
Вставка
- Опубліковано 21 вер 2024
- Te explico cómo puedes consumir una API Rest usando Fetch. Te enseño cómo usar los headers para enviar un token y cómo puedes gestionar los errores.
🔥 Puedes usar RapidAPI para encontrar cientos de APIs totalmente gratuitas para practicar: midu.link/api
▶ No te pierdas más directos en: / midudev
🔥 Cientos de APIs GRATIS para practicar con RAPID API:
midu.link/api
Amé tu video, explicás todo súper claro y entendí todo a la primera. Incluso cuando estudié programación ni mis profesores eran tan claros para explicar y me volvía loca tratando de entender las cosas que daban por sentado que ya sabíamos! (incluso cuando recién comenzábamos). Te ganaste una nueva suscriptora!!! 🙌🏻
Justo estaba con un proyecto y me tocaba hacer la parte del frontend consumiendo la API del backend y justo me aparece este video. Muchas gracias :)
Me llegó la notificación y por eso lo subí! 🤣
Te admiro muchisimo genio algun dia quisiera ser como tu esa tranquilidad y humildad es unica
Muchas gracias 🤗
Este contenido es super util para los que iniciamos es algo que se usa un día sí y otro también
asi es
Simple, corto y fácil, así es tu tutorial, muy cognitivo. Felicitaciones desde Chile.
Rápido, conciso y a prueba de actualización, tremenda explicación, un saludo crack!
Me quedó claro al fin, graaaciaas ^^ me suscribo para apoyar tremendo talento explicativo.
Buen video Midu!
No te olvides de agregar el video a la playlist de pildoras js👍🏻
Gracias por el video midu , ando viéndolos antes del curso
Muchísimas gracias! Tu vídeo me ayudó mucho ya que no sabía dónde poner los headers de la key y host para que mí fetch los lea 🥺❤️
Excelente!
Cositas a mencionar:
Asegurense que las peticiones con async await las engloban en una funcion primeramente con async
hay que meter un metodo de pago en garantia obligatorio
Jajaja literal anoche estuve buscando esto jajaja y rogaba porque tuvieras un tutorial tú 😂
gracias por el contenido, me ayuda mucho para poder conseguir mi sueño de ser programador, muchas gracias midu
Gracias, me ayudo a destrabar el desarrollo que estaba haciendo!
super bien explicado midu, suerte del error final que así has enseñado repasado buenos conceptos en poco rato :)
jajaja no estaba previsto pero valió la pena el error! jajaja
una eminencia es usted.
Necesitaba esto!! Gracias Man!
Super interesante mi estimado, muchas gracias, barbaro el ejemplo, uno aprende mas cuando falla que acertando todo el tiempo, saludos.
Te sigo mucho, porque me encantan tus videos.
Una petición: ¿podrías englobar 2 o 3 peticiones asincronas como simulando la carga de 2 o 3 desplegables o listas, y cuando vayan “resolviendose” se llenen dichos componentes?
Un saludo..:
Felicitaciones por tu trabajo en este video.
La explicación es mjuy directa y ágil. Podrías
por favor explicar con que herramientas
desarrollaste este ejemplo?
Gracias de antemano por tu atención. Saludos
Yo tambien quisiera saber qué herramientas usa.
¡Gracias!
Midu muy bien explicado. Genial 😁
Muchas gracias! 😊
Buenas! consulta, se puede hacer con async/await en lugar de .then? cual seria la ventaja/desventaja? Gracias!
Buenardo midu
Excelentemente explicado
Gracias
muy bueno y muy bien explicado...muchas gracias
Gracias a ti!!!
Justo quería aprender esto
Perfect timing!!!
Hola midu, imagino que no es una buena practica poner la apikey directo en el archvio de js, como deberiamos consumir correctamente una api con key?
eres el mejor mano
¿Que editor de código es ese que usas? Gracias
RunJS Playground
Lo estoy estudiando este mes, una pregunta: un Frontend usa frequentemente los metodos POST, PUT, DELETE? mas alla del GET...porque' veo que todos consumen datos, però queria saber si hay APIs para practicar los demas metodos para insertar, modificar y borrar. Gracias Midu 🙏 soy tu fan 💯🤩
Cada vez que te enfrentes a un formulario, ve pensando en una peticion POST para mandar esos datos al backend :)
Si modificas un valor en la base de datos en vez de crearlo desde cero, usas un put, entonces un formulario que edite un valor ya existente en la bd podría ser un caso de uso de un PUT también
Gracias crack por el video. Justo estoy aprendiento acerca de las APIs en un front-end bootcamp...Una consulta, que tipo de editor de codigo usas? Se ve muy practico...
muy buen video gracias, se entendió perfectamente el tema
Gracias por comentar!!! :)
Que buen video!
Gracias!!!
Excelente Contenido!
Genial!
Amigo deberías seguir con algo de remix está muy genial lo sencillo y rápido que es trabajar estos seguro que un par de años sera muy usado.
gracias amigo
res y response son palabras reservadas o puedo colocar cualquier cosa para reemplazarlos
Puedes usar la que quieras
todo bien, excelente la información, solo que la letra esta muy pequeña =(
Excelente
bueno el video, pero necesito poder guardar en una variable el json recuperado para usarla después, el problema es q si seteo la respuesta en una variable dentro de un then, entonces mi variable queda como undefined.
Cómo se llama ese editor de codigo
#midulive
genioo como andas! podrias hacer esto que hiciste pero vincularle un boton que al hace click se muestre la api? lo quiero hacer con una api de rapidapi de un generador de tarjetas falso pero no lo puedo hacer funcionar! gracias
no se como hacer ese simbolo de flecha
Qué programa usaron que se puede ver la salida a la derecha?
RunJs 😊👍
@@slynkbass Muchas gracias!
como se llama la extensión para tener a la derecha esa informacion
RunJS, es una app.
Un máster...
Gracias man
Un placer!!!
Que programa usa Midu para probar el Fetch?
Run js
Me salio un mensaje diciendo que la api open wheater ya no sera gratis :(
En dónde estaba ejecutando el Javascript para ver esos resultados?
Gente, como hacer para que la terminal quede del lado derecho del editor??? 😲
Como hace para comentar y descomentar tan rapido?
Te hago una pregunta, con Intel de 4 núcleos, 8gb de ram y disco ssd 120gb, me corre correctamente Android Studio, con su respectiva emulación?? Gracias!
Como gestionas los errores?
En el caso de usar fetch, con res.ok puedes saber si ha ido bien (y con el status podrías saber cuál ha sido el status code). A partir de ahí tienes diferentes opciones de cómo gestionar los errores.
Pregunta del millón, ¿ Por qué si en mi respuesta tengo este dato [{"Id":"1","Nombre":MIDUDEV"}] la respuesta es [{"id":"1","nombre":MIDUDEV"}] , podrías ayudarme para saber que es lo que sucede, Saludos
Y ajax????
ua-cam.com/video/FJ-w0tf3d_w/v-deo.html
en esa parte que web / programa estas usando para que a la derecha te muestre lo que devuleve el codigo
RunJS
Gracias por compartir!
Estudio desarrollo web y en dos clases de js y llamados a api no entendi una p#7@ m!€rda, pero aca en 8 minutos me quedó claro como el agua. Por qué no pueden ser así todos los profesores? 🤌😅
Una pregunta alguien sabe que extension es para que te salga el resultado al lado de la linea en visualstudio como en el video??@midulive
x2
No es visual studio, es RunJS