Curso JavaScript: 108. AJAX: API Fetch + Async-Await -

En este video te explico la #API #Fetch usando funciones asíncronas (#AsyncAwait) de #JavaScript, una forma moderna de #AJAX.
💛 Aprende JavaScript aprendejavascr...
📖 Mis notas sobre JavaScript jonmircha.com/...
📖 Mis notas sobre ECMAScript jonmircha.com/...
📖 Mis notas sobre JavaScript Asíncrono jonmircha.com/...
📖 Mis notas sobre JSON jonmircha.com/...
📖 Mis notas sobre el DOM jonmircha.com/dom
📖 Mis notas sobre AJAX jonmircha.com/...
📦 Códigos: github.com/jon...
🔔 Suscríbete al canal kzbin.info... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
🤲 Apóyame en Patreon / jonmircha
📫 Suscríbete a mi lista de correo tinyletter.com...

[@BryanGamalielChucViana]

Waos, A pesar de que han pasado 4 años, sigue siendo el mejor curso de JS. Gracias Jon, me has ayudado a aprender mucho. Cómo agradecimiento, y quizá no sea mucho, pero he recomendo tus cursos a mis amigos de la U y concuerdan de que es un curso muy bueno, o sin problemas, el mejor de Yt

[@jonmircha]

👋🏻😉

[@instintoimagen]

Excelente es este #curso de #javascript el mejor de youtube

[@jonmircha]

Gracias. Saludos

[@jesusmar-s8h]

para mi sin duda alguna eres el mejor profesor de todos los cursos que he visto hasta ahora incluidos los de pago así que te tendré en cuenta cuando vaya a realizar un curso. He hecho varios cursos en Udemy un saludo y enhorabuena

[@jonmircha]

👋🏻😉

[@TatoHouse-n2z]

Gracias @jonmircha es muy buen contenido el tuyo, de verdad muchas gracias amigo!!!! :)

[@jonmircha]

¡Gracias por el apoyo! 🙏

[@yohnlevistabaresbedoya2235]

Definitivamente no se como le haces para explicar tan bien, es el mejor curso de programacion que he estado. ¡Muchas gracias! Saludos desde Colombia

[@jonmircha]

;D

[@admergabrielvasquezusuvilc8458]

si funciona poner el operador ternario json = await (res.ok ? res.json() : Promise.reject(res)); para poder manipular el error , bueno ami me funciono Grande el profesor Jon Mircha genio

[@fabriciojoelmirandaquezada3819]

Buena observacion amigo, lo revise y es cierto si funciona

[@nickname1000]

Increible como siempre Micrhaaaa, vamos que cada vez se pone mas interesante. Gracias!

[@jonmircha]

😉👍🏻

[@AlejandroGuerrero]

¡Excelente explicación! Me he perdido cuando el throw tiene dos parámetros y luego el catch(err) recibe uno, pero ya veo que realmente el throw es un objeto con dentro dos parámetros. Gracias!

[@leomax522]

Excelente explicación. Abrazo enorme y gracias por todo!! Seguimos difundiendo tus videos.

[@jonmircha]

Mil gracias!👋🏻😉

[@jerlandejoseph4350]

throw es para lanzar errores u otras cosas para que sea capturado por el bloque catch(err){}.... Este curso es super intuitivo. Grasias john

[@jonmircha]

Sí, para errores

[@SabiasQuee21]

El mejor curso si quiere aprender JavaScript

[@jonmircha]

👋🏻😉

[@jlopekkos2164]

La verdad que entre los tres métodos vistos hasta ahora me quedo con este, los errores son mucho más fáciles de manejar, el código es más legible y es más sencillo de entender.Muchas gracias Jon por este asombroso curso, ya estoy deseando empezar con el de Reactjs 😜

[@jonmircha]

😉👍🏻

[@Wiiiiizard]

🧙‍♂Muchas gracias!!! Buen curso!!!

[@jonmircha]

Gracias por comentar

[@danielfabiani4468]

Buen día, gracias. Tuve que ir a repasar promises y async await. Y lo mas probable es que deba volver varias veces mas. Saludos

[@jonmircha]

Mucha suerte

[@jhonimanuelsanchezsuarez3117]

Excelente video. Esto es contenido de calidad. Gracias por tus aportes.👍🏼

[@jonmircha]

Con mucho gusto

[@addevmoises]

Mucho más entendible con async-await, que genial que expliques muchas formas de trabajar AJAX.

[@jonmircha]

Con mucho gusto ;)

[@davidromero6292]

😃 ¡Muchas gracias por el aporte Jon! tengo mi CV online con mi colección de iconografía y ahora puedo llamar a todos mis iconos con Fetch-AA y mi archivo JSON (que también hice gracias a tus anteriores clases) y me he ahorrado un laaaaargo 'copy/paste' de etiquetas HTML. A seguir aprendiendo. Gracias de nuevo 🤓

[@jonmircha]

😉👍🏻

[@alejandrohermitano1121]

Tremendo curso!!

[@jonmircha]

😉👍🏻

[@MartinExequielFuraca]

Buenisimo Jon! Gracias!

[@jonmircha]

Con gusto

[@eder3232]

buenisimo curso, gracias jon

[@jonmircha]

Con gusto

[@dan_seb]

El mejor curso de JavaScript!!!

[@jonmircha]

Muchas gracias!

[@josemigueltrinidadr.329]

¡Excelente explicación!

[@jonmircha]

😉👍🏻

[@carlosmedrano6077]

he visto 3 videos hasta ahora, excelente..contenido y explicación. Sigue..así..amigo

[@jonmircha]

😉👍🏻 aprendejavascript.org/

[@alphaphantom3846]

ya se vienen esos 80k subscriptores (al día de escribir este comentario el contador dice 79.200 😱😱) y sale el curso de HTML ... cuando hacer todos los cursos 🤯 gracias profe por tanto contenido de calidad y por volarnos la cabeza con tantas cosas interesantes a quienes queremos saber sobre este mundo de desarrollo 🥳

[@jonmircha]

😉🙌🏻

[@carlesbautista8293]

Muy bien explicado Jon, si que es verdad que es mas limpio con fetch async-await, Gracias!!!

[@jonmircha]

Totalmente!

[@Black_Coding]

Estas últimas clases fueron demasiado buenas! La forma más moderna y "mejor" de buscar datos a una API es con esta última forma no? Muchas gracias por todo el contenido!

[@jonmircha]

👍🏻

[@giovanniemilioramirezberro9640]

excelente, curso.

[@jonmircha]

😎👍🏻

[@scopionsyomero]

Muy bueno la verdad!!

[@jonmircha]

😉👍🏻

[@fernandoarroba331]

Muy buen contenido

[@jonmircha]

👌🏻

[@carzmusicacreacionlecturac789]

Excelente video, una gran claridad y profesionalismo de Jon Mircha

[@jonmircha]

Muchas gracias!

[@angeloruiz9344]

muy buen curso profe muchas gracias

[@jonmircha]

Con mucho gusto

[@yanluisnunezlara319]

Me gusta que sea con el mismo ejemplo por qué entiendo mucho mejor

[@jonmircha]

👋🏻😉

[@williamalexanderpineda6098]

Muchas gracias

[@jonmircha]

Gracias por comentar

[@ciroalosa]

Jonathan si quieres hacer peticiones a una API que requiere loguearse? O enviar cookies, sesión de usuario etc... Cómo se podría hacer? Muchas gracias por todo el curso! Es de lo mejor que he visto.

[@jonmircha]

Para eso se usa el objeto de opciones de fetch, más adelante lo veremos

[@ciroalosa]

@@jonmircha gracias!!!

[@CristianRomero-up1nj]

9:18 "Voila". Mon ami son travail est magnifique. saludos desde bs as.

[@jonmircha]

Gracias! 😊

[@javieraleagagarcia8193]

Buenas noches, felicitarlo primeramente, explica muy bien y un contenido que me costaba lo he asimilado muy bien. Sigo su curso y durante la realización de este video siguiendo su código, a la hora de mostrar en el HTML el mensaje de error me devuelve: "Error undefined: Ocurrió un error" (() => { const $fetchAsync = document.getElementById('fetch-async'); const $fragment = document.createDocumentFragment(); async function getData(){ try { let response = await fetch("assets/user.json"); let json = await response.json(); if(!response.ok) { status: response.status, statusText: response.statusText}; json.forEach(element => { const $li = document.createElement('li'); $li.innerHTML = `${element.name} -- ${element.email} -- ${element.phone}` $fragment.appendChild($li); }); $fetchAsync.appendChild($fragment); } catch (error) { console.log("Estoy en el error del catch de Async-Await", error); let message = error.statusText || "Ocurrió un error" $fetchAsync.innerHTML = `Error ${error.status} : ${message}`; } finally { console.log("Testing") } } getData(); })(); Este es mi código no se donde esta el error por el que me devuelve undefined. Disculpe si en la sección de comentarios no se debe poner código pero no sabia donde postearlo para que me ayude. Muchas gracias de antemano.

[@jonmircha]

Si te dice undefined revisa en que linea, seguramente tienes un error de dedo enla definición del nombre de tu variable o función

[@wi330601]

Holaaa... una consulta, ya me me confunde un poco esto de los rest... con xmlhttprequest o fetch se los usa solo para acceder a datos que ofrecen terceros o tambien para cuando tengo que acceder a una base de datos propia que lo hago con php por ejm. y yo genero la consulta a la base y armo la respuesta en json?... Excelentes tus cursos Jon. Un abrazo y gracias por todo.

[@jorgerafaelcallejoflores67]

Excelente profe!!!!

[@timawid]

⭐️⭐️⭐️⭐️⭐️ Excellent ✅

[@jonmircha]

👋🏻😉

[@emersonpalaciootalvaro2632]

excelente: sin palabras excelente 🤘🤘🤘🤘🤘🤘👍👍👍👍

[@z3r0krypt]

Es una nimiedad pero por si alguno le interesa añadí en el catch una comprobación para cuando el fetch se realiza vacío, que devuelve el error "undefined", sería lo siguiente: if(err.statusText === undefined) { $fetchAsync.innerHTML = `${err.message}`; } else { let message = err.statusText || "Ocurrio un error"; $fetchAsync.innerHTML = `Error ${err.status}: ${message}`; } Haciendo esto, en lugar de dar un error undefined nos lanza directamente el mensaje de error generado.

[@jonmircha]

🤓👍🏻

[@drbv27]

Increible que hace mes y medio empece y ya voy en el video 108...wow,...genial Jon. Una Pregunta que fuente usas en tu VSCode que te queda todo tan compacto?

[@jonmircha]

Aquí te dejo un artículo y video con toda mi config de VSCode jonmircha.com/vscode

[@carloscontreras6051]

A pedido del sensei, ayudando al posicionamiento😊 Que llegue a cada desarrollador, y futuro desarrollador

[@jonmircha]

😃🙌🏻

[@denseydelgado3779]

gracias

[@jonmircha]

😉👋🏻

[@yovanyescobarrojas2041]

gracias profe por tus explicaciones , me parece mejor este forma de realizar las peticiones ajax y además es mucho mas corto y legible el código, yo me quedo con esta "metodología", saludos desde colombia.

[@jonmircha]

👍🏻

[@angelabrahamlopezdelgado7574]

Hola broy , me gustan las clases pero como estudiante he notado algo y pido tu consejo usar asyn await , lo que haces es esperar los datos , pero me puse a pensar si hacer extracion de datos y digamos eso dilata 5 o 10 s y usas await lo que haces es tu codigo mas ineficiente no digo que este mal pero eso lo he visto podias hacer un video explicando como mezclar promise y async 🥲 await

[@dec111090]

Hola Jon!!! Muy buen video!! Consulta: para el ejemplo de este video utilizas fetch con try-catch ¿seriá posible utilizar then-catch o el simple hecho de utilizar async-await obliga a utilizar try-catch?

[@jonmircha]

No necesariamente es obligado, también podrías mezclar promesas con async - await

[@ciroalosa]

Gracias!

[@jarrodvillalobos]

El que no aprenda con tus cursos Jon es por que no quiere 🙂no hay mejor curso que este de Javascript de paso gratis y en Español muchas gracias

[@jonmircha]

👋🏻😉

[@GerdSa]

porque cuando en ves del throw, retornas un promise.reject no entra en el catch? cuando se hizo sin asyn await funcionab.

[@jonmircha]

😮

[@aronlife1098]

🕹El try, catch, finally suena como un combo de videojuego🎮

[@jonmircha]

jajaja

[@jesusparra6714]

jon hice una prueba con el archivo json y cuando cambiaba algún dato para que ese datos se reflejara en la pagina tenia que actualizar el navegador, como hago para que cuando modifique ese dato lo refleje en la pagina si actualizar el navegador

[@NonsenseIsOver]

Profe, pregunta, ¿puede ser que incluso cuando fetch nos tire un 'ok' : 'false', de todos modos tendramos que parsear la respuesta a json, ya que el mensaje personalizado se encuentra en el body?

[@jonmircha]

Depende de cada API, por eso es importante leer su documentación ;)

[@NonsenseIsOver]

@@jonmircha Buenísimo profe, gracias!

[@reyns8059]

y de que manera es mejor usar fetch? Da igual y puedes usar la forma que mejor entiendas o existen casos puntuales en los que sale mejor usar el async-await y otros en los que no? A mi particularmente me parecio un poco mas entendible sin el async porque, como estoy empezando, me parece mas facil ver el flujo del programa, la forma en que se ejecuta, se forma y que significa y de donde sale cada cosa a pesar de que si es medio molesto pensar en que puedes tener mil "then's", me parece que seria cuestion de acostumbrarse porque en realidad el async - await es como la version resumida y quizas por eso, que aun no me acostumbro ni conozco mucho, se me hizo mas complicado de ver. Estoy seguro que cuando llegue a la parte de los ejercicios ya entendere mejor esta parte

[@jonmircha]

Depende lo que requieras, pero eso lo veremos en la sección de ejercicios destinados a AJAX y APIs ;)

[@raulruidiazgoleadordeperu9524]

No no async await son funciones asyncronas que son secuenciales.Promesas son asyncronas,en mi particular uso promise all mas.

[@cagriostro4629]

Hermanito... una consulta... ando medio perdido... estas tegnologias de js, fetch, ajax, y axios, son individuales.. o tengo que usar ajax para usar fetch? quiero hacer un CRUD pero Que sea sin refrescar la pagina, la Edicion y agregar... con esto tendria que ver de hacer una ventana emergente...

[@jonmircha]

Fetch es un Ajax moderno

[@matiasgomez9416]

Idolo!

[@JB-pl8vj]

Tremenda clase! Profe quería consultarle que Color Theme de Visual Studio Code utiliza, ya que en el mio me pone los parentesis, llaves y corchetes en blanco todos por igual y me gustaria poder darles color como el suyo asi me siento mas comodo visualmente! Desde ya muchas gracias

[@jonmircha]

Aquí puedes ver mi configuración jonmircha.com/vscode

[@JB-pl8vj]

@@jonmircha muchas gracias Profe! Ahi lo vi!!

[@willmend6096]

Maestro por que suele meter los eventos o los callback en (), pero algunas veces no?

[@jonmircha]

NO te entiendo, ponme un ejemplo para saber a que te refieres

[@sebastiangonzalez-wj1fj]

creo que te refieres a esto ( res =>{}) y aveces ( (res) =>{}), es indiferente siempre que sea un solo parámetro el que pasas, de nuevo si pasas UN solo parámetro como en este caso "res" puedes muy bien encerrarlo en paréntesis o no, pero si son mas de dos, si tienes que encerrar obligatoriamente los parámetros en paréntesis, ejemplo ( (res,error)=>{}), siempre que sean mas de dos, tres, cuatro y así llevan paréntesis obligado. puedes ver este video con mas detalles del mismo jon, kzbin.info/www/bejne/jaamqGyXnLtmiMU

[@willmend6096]

@@sebastiangonzalez-wj1fj gracias ya lo tengo claro, pero esto ha de servir para alguien más 🤘🤘🤘🤘

[@jhonatansantofimio3764]

En que video puedo ver el método loading???

[@jonmircha]

método loading???

[@jhonatansantofimio3764]

@@jonmircha si que no muestre todo el sitio web hasta que todos los archivos han cargado

[@yasdesigner5166]

Hola, me ha encantado este curso y he aprendido bastante, practicado en esta clase me sale este error en Visual Studio Code 'async functions' is only available in ES8 (use 'esversion: 8') como soluciono eso porq no me ejecuta la función

[@EXRILOT]

profe, cuando pongo console.log(err) dentro del catch, me sale "SyntaxError unexpected token < in JSON at position 0" una vez que corrijo la url todo sale bien, pero cuando mostrar el error me sale eso

[@jonmircha]

😮

[@ElTripaSeca100]

grande jon

[@jonmircha]

😉👋🏻

[@josebracho1672]

Profesor una pregunta, porque cuando fetch me lanza un error no sigue la linea de abajo y se va directamente al catch?

[@jonmircha]

Justamente ese es el funcionamiento del catch, cuando detecta error la Promesa canaliza el flujo al catch

[@josebracho1672]

@@jonmircha Gracias por responder profesor, yo me estaba refiriendo a que no me deja manipular el mensaje de error, no se si deba modificar otra cosa?

[@jonmircha]

@@josebracho1672 Debes agregar la validción del res.ok y rechazar la Promesa para que puedas manipular el error en el catch :)

[@helipalacio8772]

👏👏👏🙏🙏🙏

[@jonmircha]

👋🏻😉

[@heimancastro1954]

👏👏👏👏👏👏👏👏👏👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻

[@jonmircha]

😉👋🏻

[@helipalacio8772]

👨

[@jonmircha]

👋🏻😉

[@alejandrosaldarriaga4750]

Bro tenes un lugar reservado en el cibercielo jajajaj (Y)

[@jonmircha]

🙈😃

[@aboluteseck]

A nooo ya se porque xD 14:43

[@hardisonpaulino8846]

🫵😎👏👏👏👏🫶

[@jonmircha]

👋🏻😉

[@Leoutn]

ho si , si duda el cursos mas compoleto que en español

[@jonmircha]

😉👋🏻

[@edwingm933]

el único que me sirvió fue este jajajajj, por fi, ya me estaba desesperando

[@aviellisandrovasquezreyes1172]

:D

[@jonmircha]

😉

[@sandokanArg]

Llegue tarde hoy

[@mis2michis726]

Gracias!!!!

[@jonmircha]

😉👋🏻