Fetch API in JavaScript (GET, POST, PUT, DELETE) | asynchronous programming
Вставка
- Опубліковано 14 гру 2024
- With Fetch you can ask for external resources like text, images, JSON, etc from your server or external servers to what we know as APIs, no more ajax, live fetch.🎉
Subscribe for more content about JavaScript.
Follow me to see behind scenes and exclusive content.👇🏼
/ leonidasesteban
/ leonidasesteban
github.com/leo...
Documentation of Fetch:
developer.mozi...
Clase de promesas 👉 ua-cam.com/video/EVQR8TjjAWA/v-deo.html
El mejor... Gracias
Muchas gracias crack!
Leonidas gracias por dejar contenido como este, estoy realizando un sitio web que permite en un input dejar un excel este se convierte a json y después me debo enviar esta información a traéz de un API REST que exije parametros de encabezado y además con un secret id debo generar un token válido para realizar la petición a la API externa te agradecería si algún día realizas un video con este tipo de peticiones que la verdad no se ven fácilmente en contenido de youtube muchas gracias y bendiciones.
Los archivos de la clase donde estan?
Este vídeo me hubiera ahorrado mucha investigación y prueba - error hace 3 días 😅😅 P.S.: Me gustaría que hicieras la clase de promesas.
Promesas y luego Async Await
.then((response) => {
const image = response.url // acá ya guardas la url de la imagen
renderImage(image)
})
Leónidas lo probé asi y me funcionó, gracias por este video, siempre tanta informacion de calidad!!
Llevaba como 5 Días intentando manipular la respuesta de la petición y Leónidas me lo explico en el min 10 solo ejecutar función y le pasó la data como parametro muchas gracias
Sos un genio !!! hice cursos tuyos en varias plataformas y no tienen desperdicio !!! una genialidad !!!
Leónidas en serio eres muy gracioso y practico, una manera de aprender buenísima
Gracias Alejandro, me caen mejor los que les gustan mis chistes no tan chistosos 😅
@@LeonidasEsteban son buenísimos !!!
Seria bueno que un próximo video hagas un pequeño CRUD con un input y un botón que haga todos los métodos, GET, POST, PUT, DELETE con Fetch o async await.
total
Leonidas, te sigo desde hace años, la verdad ya se que sos groso y que te encanta estas cosas, pero ahora descubro que sos muy bueno explicando, por eso, por mas que sepa del tema, veo tus videos,.
Muuuy bueno y te felicito!!.
Saludos,.
Profe Leónidas, quedo muy claro y me ayudo muchísimo. Espero que este fin de semana disfrute de un riquísimo ceviche.
no te imaginas como me han ayudado tus videos muchas gracias.
me ha servido mucho tu explicación. muchas gracias Leonidas...
Excelente clase.. con razón yo sufría con el objeto XMLHttpRequest
Aquí no lo discriminamos ua-cam.com/video/4l0PELZZqAM/v-deo.html
Oye @@LeonidasEsteban de casualidad no tienes un vídeo sobre el protocolo HTTP. Y como funciona, es que por más que leo y busco, no logro entender cómo funciona como tal, es decir cómo van los datos y demas.... Ah por cierto gracias por todos este contenido
Hola Leónidas, sabes como puedo actualizar un archivo .Json desde un archivo .js ? La clase está muy bien, con mucha información útil y graaaacias peeeeero... solo has puesto ejemplos de ✅GET, los métodos❌POST, 💥PUT, 💥DELETE sólo los has enumerado. Por favor, haz honor al título del video y pon un ejemplo de cada. Sobre todo de 💥PUT💥ya que PUT y DELETE me fallan con Live Server y XAMPP y no se qué hacer, se ve que es un problema muy típico, ya que los servidores inhabilitan PUT y DELETE.
el mejor tutorial condensado de fetch, muchas gracias
Genial tus vídeos , Pikachu quedó loco con la teletransportación. 😂👍👍.
Sigue adelante y éxitos.
Estoy queriendo hacer un CRUD pero no que usar... pienso usar Ajax, pero para usar el mysql con llamadas json ? como seria... ?
Lo haces ver tan sencillo muchas gracias te diré profe, jeje gracias profe espero más vídeos así, me estoy motivando a aprender más Javascript un abrazo profe saludos
😅 con mucha práctica se pone más fácil, dedícale tiempo todos los días para que poco a poco vayas mejorando.
Hola te pregunto: es posible pasar una variable con POST con fetch de un formulario q otro formulario sin que aparezca en la URL?
Que crack este hombre😳🔥💪, excelente video hermano muy interesante
como se aplicaria para obtener un array desde un router que punta aun controlador que tiene un index que devuelve un array
?
Cómo hago para guardar ese json que recibo en una variable?
porque cuando pongo en el fetch una url que me da spring boot, no me trae los datos?
Un crud se podrá hacer?
Hola quise hacer lo mismo con blob pero para acceder a un video, y a partir de ahí me salió error o archivo no encontrado siendo que esta en la misma carpeta, con las imagenes no sucedió lo mismo, que puede estar pasando
Esto me hubiese facilitado la vida en el segundo proyecto del bootcamp xD
Sería genial una clase de promesas, async/await y una sobre el uso del debugger y console.
¡Gracias! :)
De acuerdo
Esto es el santo grial del desarrollo frontend
post put y delete en que parte del video vienen?
Amigo pregunta yo cree una api de shopify Yo puedo registrar modificar eliminar etc desde un formulario de mi localhost y me actualiza mi tienda en shopify pero cuando en el postman en el body json coloco los datos mi api no me lee los campos me sale como indefinidos. Tengo conflictos ya que en mi api yo recibo las variables a través de un post tienes algún curso de algo similar?
¡Super vídeo, gracias Leonidas!
como puedo usar data de JSON en javascript auxilio
Se puede usar fetch para obtener la ip local? Voy 2 días investigando y solo encuentro que se puede hacer con APIs externas y necesito obtener la
Ip de una máquina que no está conectada al internet 😕
Los archivos de la clase donde estan?
Me encantó muchísimo, Gracias !!!
Vengo de la carrera de JS en Platzi y gracias a esto me ahorré bastantes dolores de cabeza :D
😎 que buen feedback
¿Existe un curso en Platzi para aprender mas a fondo cómo configurar e implementar peticiones?
Llevaba aproximadamente una semana intentando conseguir que el JSON funcionará y con esto lo pude hacer funcionar, muchas gracias
Una maravilla como explicas Leonidas, felicidades y muchas gracias me super sirvio!! :)
Hey! Leonidas que bueno tenerte por acá exitos en tu canal (apenas te descubrí)
Excelente explicación 👍
Salu2 desde Colombia
Hola Jeff, hay un montón de contenido ya espero te sirva para entender mejor javascript 🤘 suscríbete y ponle campanita que todas las semanas habrá algo nuevo
¿Como puedo guardar el resultado de un Fech en una variable para poder declararlo de manera global ?
Leonidas, que compatibilidad tiene con los navegadores antiguos?
Hola, muy buen video, como se envian varios elementos con el mismo nombre?
Estuve practicando con esta API. Pude traerme una lista de pokemones. Solo los nombres. Quería hacer como una lista de pokemones con imagen y nombres, paginar, obtener una lista por tipo desde la vista. Y otras cosas más que se me ocurren. Es un ejercicio que propongo. Mientras veo si lo puedo lograr. Saludos
Claro que puedes, comparte la url del proyecto to cuando lo logres
Muy buena clase, me gustaría ver la clase de promesas :D
te prometo una clase de promesas
@@LeonidasEsteban estaré al pendiente de tu canal 🤩
Que buen video excelente como lo explicas
Muy buena clase, pero se puede agregar un preload a un fetch? Cuando por ejemplo estas trayendo muchas imagenes y se demora en cargar, se podrìa mostrar una imagen de espere por favor o algo similar?
alguien me puede recordar por que la const empieza con signo $?
Gracias por tu clase.
Como le haces que cuando seleccionas parte del código lo identas hacia atrás¿? No se si se entienda mi pregunta...
En teclado en inglés es con command + [
hola por compartir tanto conocimiento, como puedo pasar el valor de un a php
Si deseas hacerlo con ajax usa con fetch y capturas el dato con javascript o tambien lo puedes enviar directamente desde el form de html
@@calceta888 Por favor me podria regalar un ejemplo gracias
muy buen video
y sobre todo el carisma
Muchas gracias 🙏 me divierto mucho haciendo esto
que vengan las clases de Promesas !!!! Graciiass por toodoooo
Gracias por la explicación, muy divertida y me encanta ver la pokeApi. Saludos.
Muchas gracias :)
Necesitaria hacer un CRUD sobre un fichero JSOn tienes algun ejemplo que me pueda descargar ???
y PUT? y DELETE? :( un ejemplo?
Qué libros recomiendas de JavaScript que todos deben leer y cuál es su orden. Gracias bien video
You don’t know JavaScript es un buen comienzo
@@LeonidasEsteban gracias 😊. Cuando lo lea te aviso
me encanta la API de pokemón :D gracias! muy entretenido!
Es mi favorita
Excelente, gracias Leonidas.
Creo que como parte complementaria también podrías explicar un poquito acerca de los catch. Pero estuvo genial tu explicación.
Y sí, una clase de promesas por favor.
Saludos de Perú
ua-cam.com/video/EVQR8TjjAWA/v-deo.html
No dije nada v:
Saludos.
Que cool que estes explorando las clases que tenemos disponibles 😊 ponle campanita al canal para que asistas a la sesiones en vivo. Se pone muy divertido.
Vanilla Javascript💪🏼
Estoy aprendiendo mucho con la #escuelajs y con estos videos
Muy bueno el video.
Tengo un problema al referenciar métodos de un webComponent desde un fetch. Muchas gracias
Hola Leonidas, gracias por el contenido, pero tengo una duda no hay mucha información sobre fetch delete, lo estoy intentando sin embargo no me funciona. ni modo tendré que hacerlo con ajax por ahora
Hola Leonidas. ¿Cómo puedo enviar un alert desde un error 404 utilizando fetch?
La promesa tienen then y catch, este último será llamado si la petición devuelve una respuesta de 404 y en ese momento puedes mandar tu alert() 🔥
si my chevre esta clase...POR FAVOR LEONIDAS...CURSO DE REACT NATIVE
Poco a poco, por lo pronto mi curso de React Native está en platzi.com/native
Tremendo Leonidas, estoy aprendiendo a consultar apis. PREGUNTA: Si tengo que hacer varias peticiones a diferentes URL (podría ser como ejemplo status de servidores de juegos online, GTAV, Minecraft, CSGO y parecido) las peticiones serian iguales, lo único que cambiaria serian las URL nada más, el resto del codigo seria el mismo para cada una amostrar en el contenedor. Gracias!!!
Los endpoints seguro van a cambiar y siempre debes tener en cuenta el nivel en el que son accesibles porque alguna api se consultas con API keys o limitan los requests a sitios externos por CORS
@@LeonidasEsteban Ahh ok, si eso de las limitaciones ya lo tengo en cuenta, yo solamente agarre este porque "supuestamente son gratis" igual lo mío es aprender hacer solicitudes para mostrar diferentes servidores y no repetir tanto código, pero todavía me falta aprender jeje :)
se puede usar Fetch para consumir APIs en React?
Totalmente
¿al usar fetch puedo "cachear" el error usando catch al finalizar la promesa y pasarlos como argumento cuando defino la promesa (return new Promise(response, reject))?
me da error me sale: error SyntaxError: Unexpected token < in JSON at position 0
Hola que tal leonidas qusiera saber cual es el curso que impartes en platzi.
Son varios échale un ojo a esta pagina platzi.com/profesores/LeonidasEsteban/
@@LeonidasEsteban muchas gracias. Veo que eres muy bueno en javascript. Cual seria la mejor opcion para aprender javascript contigo?
Uso Patreon, tengo planes de mentoría en Patreon para mejorar técnicamente y crear un plan de carrera Patreon.com/LeonidasEsteban
10:45 por qué utilizas el signo de dólar antes del nombre de la constante? Es algun tipo de practica? Gracias, me gusto mucho la clase.
Es una convención que uso para saber use una variable es un elemento de DOM
No me sabía lo del debugger, siempre ponía puntos de interrupción, gracias!
Súper 👏 comparte al clase para que más gente se entere
Que buena información para mí en este momento jaja , una pregunta, si ya tengo una API y quiero imprimir ese JSON en formato CSV puedo darle el formato de mi archivo model en algún punto, o me toca formatear el csv antes de obtenerlo?
Gracias por este video. Estoy trabajando en un componente material ui que llamé SignUp y como su nombre lo indica sirve para que las personas se registren. Soy totalmente nuevo en esto de fectch. Como puedo obtener los datos del formulario y enviarlos a una ruta de Sails (backend) que se encargará crear el nuevo usuario en la base de datos, mediante el un modelo de Sails.
Seguro la clase de form data te ayuda
Ante todo gracias por tus videos Leonidas ,
si te puedo pedir como enviamos por metodo post datos de un formulario a una api rest. porfas si fuera posible Leonidas.
gracias nuevamente.
Hola, he escuchado que consumir una API desde javascript es inseguro, ¿Cómo puedo consumir una API privada desde el frontend de manera segura?
Eso que haz escuchado no es cierto. Lo haces autenticandote pero eso es más establecer la reglas de consumo del lado de backend.
@@LeonidasEsteban Mucha gracias, eso estaba leyendo, que la API pone las condiciones de uso.
Muchas gracias por la explicación!
men muy buena tu intención de enseñar me parece genial
Gracias por la explicacion, se pude usar fetch con async-await?
Claro, mira la siguiente clase que te explico como
hola quiero traer datos de un servidor y me dice que tengo que poner esto GET /api/v1/market/allTickers la pagina es kukoin podrias explicarme como armar bien el url con eso de get, lo necesito para importar data a axcel muchas gracias
Genial gracias Leónidas esto me ha servido mucho y porfin me quedo claro
Hola buenas a todos programadores! Tengo una duda, el método get me funciona pero los otros 3 no, me devuelven el error 404. Se podría simular el método post por ejemplo con esta api?
video.like = false; if(LeonidasEsteban.answer === true){video.like = true; }else{tpm .i.}
Por qué tienen que ser implementados en el API, en este caso aparentemente no lo estaban y como cualquier ruta inexistente regresaron "404"
@@LeonidasEsteban pero la ruta si existe no? Porque si nos devuelve la información con GET. (Gracias por la respuesta , me suscribo igualmente)
Grande profe, saludos desde Chile ✊🏽
Saludos hasta chile 🌶 🇨🇱
gracias! muy bueno, claro y práctico. saludos. -
Es man se me hacia conocido, cuando dijo pokemon me acorde que vi ele curso de git y github de paltzi con el. muy bien profesor
Excelente clase, pasare mas seguido a ver los vídeos, desconocía lo de pasar un objeto de tipo blob convertirlo a string y mostrarlo como URL eso fue puff.
Muy buena clase leonidas (Y), que tal un menu hamburguesa sin bootstrap, con css, js y html??
Excelente idea!
Gracias por este aporte Leonidas, siempre se aprende algo nuevo. Estaria muy interesante una comparacion de Fetch vs Ajax.
Tenemos una clase de ajax en el canal, obvio de por Fetch
pro fe que opina de vues y React?
Que React es el mejor del mundo mundial
buen video , solo que me hubiera gustado ver ademas la forma de manejar los errores tipo conexion.
Si queremos ver la clase promesas porfavor leo 💪🏼
No se diga más
Hola Leonidas, soy fan del trabajo que realizas y aun mas fan del tema que usas, me gustaria saber con exactitud que tema usas de vscode y con que configuración... saludos (Pondre este mismo sms en tud videos hasta que me respondas jajajjj)
Haz la clase del form data que mencionas
Hola, excelente video, muchas gracias, sola una duda:
Por lo que veo con fetch solo puedes acceder a la ultima respuesta (la 200), pero si por ejemplo envío una petición a una url y la respuesta es una redirección (301) y quisiera acceder a los headers o contenido de la misma, ¿es posible?, viendo el contenido del response de fetch hay un atributo redirect, pero siempre me marca true, quisiera poder accerder o saber si hay una forma de hacerlo a todas las respuestas intermedias antes de devolver un código 200, espero me puedas responder, me super urge :c.
Muy bueno el vídeo y muy bien explicado pero me quedan dudas. Si quiero obtener más datos del json, como por ejemplo las clases o los ataques ¿tengo que crear una nueva función para cada cosa como puse en el ejemplo al final o hay manera de extraer todo a una constante y extraer cada dato que necesite?
(ejemplo)
.then(pokemon => {
renderizarPokemon(pokemon.sprites.front_default)
nombrePokemon(pokemon.name)
for (let i= 0; i < pokemon.types.length; i++) {
tipoPokemon(pokemon.types[i].type.name)
}
})
Gracias de nuevo por los vídeos, aprendo mucho :D
Yo utilizo ajax :D me podrias decir cuales son los factores que te incomodan del susodicho?
Implementarlo en vanilla no es tan directo como un Fetch, si lo usas con jquery mejor buscar otras opciones para no cargar toda la librería. Tengo una clase donde implemento el método ajax en vanilla js espero te guste
lo maximo, un saludo
Gracias Leonidas! Eres un máster! 🔥🔥🔥
No puedes hacer de un formulario simple y que podamos usar fetch para enviar los datos a la base de datos que tengamos conectada por nodejs
MongoDB te sirve? A veces esas cosas varían un tris dependiendo de la BD del resto seguro el igual en cualquier caso y podemos hacerlo
justo lo que necesitaba
Yeiiii, compártelo, seguro alguien más lo necesita
De grande quiero ser como Leonidas
Porque odias JQuery??? A mí me.gusta mucho pero por evolución me tengo que actualizar 😭😭😭
Tienes toda la razón, jQuery está súper cool. Es un chiste malo lo mío
Quiero tambien la clase de Promesas y la comparacionde de bundlerss (WEBPACK, ROLLUP PARCELL)
muy bien explicado, me ayudo
Maravilloso! Esto es súper indispensable en el día a día