Cómo CONSUMIR una API REST con JAVASCRIPT y Fetch + Promises con gestión de Errores
HTML-код
- Опубликовано: 27 авг 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!!! 🙌🏻
Te admiro muchisimo genio algun dia quisiera ser como tu esa tranquilidad y humildad es unica
Muchas gracias 🤗
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í! 🤣
Simple, corto y fácil, así es tu tutorial, muy cognitivo. Felicitaciones desde Chile.
Este contenido es super util para los que iniciamos es algo que se usa un día sí y otro también
asi es
Rápido, conciso y a prueba de actualización, tremenda explicación, un saludo crack!
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
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!
Buen video Midu!
No te olvides de agregar el video a la playlist de pildoras js👍🏻
Me quedó claro al fin, graaaciaas ^^ me suscribo para apoyar tremendo talento explicativo.
Gracias por el video midu , ando viéndolos antes del curso
Jajaja literal anoche estuve buscando esto jajaja y rogaba porque tuvieras un tutorial tú 😂
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
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.
una eminencia es usted.
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..:
Necesitaba esto!! Gracias Man!
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
Buenas! consulta, se puede hacer con async/await en lugar de .then? cual seria la ventaja/desventaja? Gracias!
Midu muy bien explicado. Genial 😁
Muchas gracias! 😊
Buenardo midu
Excelentemente explicado
Gracias
muy bueno y muy bien explicado...muchas gracias
Gracias a ti!!!
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?
¡Gracias!
¿Que editor de código es ese que usas? Gracias
RunJS Playground
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...
Justo quería aprender esto
Perfect timing!!!
muy buen video gracias, se entendió perfectamente el tema
Gracias por comentar!!! :)
eres el mejor mano
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.
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.
Excelente Contenido!
todo bien, excelente la información, solo que la letra esta muy pequeña =(
res y response son palabras reservadas o puedo colocar cualquier cosa para reemplazarlos
Puedes usar la que quieras
Que buen video!
Gracias!!!
Qué programa usaron que se puede ver la salida a la derecha?
RunJs 😊👍
@@slynkbass Muchas gracias!
Genial!
Cómo se llama ese editor de codigo
#midulive
como se llama la extensión para tener a la derecha esa informacion
RunJS, es una app.
En dónde estaba ejecutando el Javascript para ver esos resultados?
Que programa usa Midu para probar el Fetch?
Run js
gracias amigo
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
Me salio un mensaje diciendo que la api open wheater ya no sera gratis :(
Gente, como hacer para que la terminal quede del lado derecho del editor??? 😲
Como hace para comentar y descomentar tan rapido?
Excelente
Un máster...
Gracias man
Un placer!!!
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
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.
Y ajax????
ruclips.net/video/FJ-w0tf3d_w/видео.html
en esa parte que web / programa estas usando para que a la derecha te muestre lo que devuleve el codigo
RunJS
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!
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? 🤌😅
Gracias por compartir!
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