En este video veremos una pequeña introducción a lo que se conoce como Fetch PIAI fetch y viene a reemplazar
a Ayax ahora no me malinterpretes pero Ayax sigue siendo muy útil sigue siendo utilizado muchísimo en
muchos proyectos tiene mayor soporte ha estado por mucho tiempo ya en JavaScript.
Por lo tanto el soporte de Ayax es mayor que el de Fetch e incluido proyectos en ambos casos de fecha
y de Ayax de fecha todavía no está el proyecto al menos ahorita lo más seguro es que tal vez sea cuando
veas este video y esté no va a tomarme tantos días agregarlo pero vamos a ver cómo trabajar con Fetch
y también hay proyectos con Ayax para que tengas todo el conocimiento necesario primero vamos a crear
que una función puede ser de cualquier tipo de función descargar usuarios parentesis y vamos a utilizar
una API por lo tanto hay que poner una cantidad Garçons API utilizando la sintaxis temple string Lapique
voy a utilizar esta y es esta que está aquí no lo había cargado voy a copiarla o RL pues que hay resultados
30 voy a reemplazarlo con signo de dólar cantidad y punto y coma.
Aquí mandamos a hacer llamado a Fetch Fetch lo hace más fácil porque utilizas nada más la palabra fetch
y le pasa es que en este caso es API la misma que tenemos aquí arriba utiliza algo que se conoce como
los Promises que utilizan esta sintaxis.
En respuesta a Rob Johnson como necesitamos retornar el valor está implícito pongo aquí respuesta punto
y Jayson Fetch Apella tenerla.
El método para retornar un Jayson Roden datos que iba a poner con su elpunto log datos si guardas cambios
y abres el proyecto no pasa nada.
No sé ahora quién la inspeccionó las consolas me pongo aquí en consola.
No hay nada por qué no he mandado llamar esta función poder estar aquí arriba y ver que viene resultados
ahora aquí los resultados se guardan en results.
Por lo tanto aquí le pongo punto results plural puedes ver que nada más viene uno porque aquí en la
cantidad no lo estoy pasando nada digamos que quiero que me retorne 30 ya tengo 30 resultados ahora
aquí en lugar de tener esto voy a cortarlo.
Nuestros datos cortó y aquí voy a poner una función que se va a llamar imprimir HTML iba a cerrar datos
punto results.
Ahora esta función es opcional.
Podrías escribir todo el código en mi caso me gustaría hacerlo con una función imprimir HTML tomar unos
datos y estos datos puedes ver que aquí viene todos los datos y es claro hacia abajo puedes ver que
esto es un arreglo.
Entonces podemos utilizar uno de los muchos métodos que vimos punto Map Fortich cualquiera de los que
vimos a lo largo de esta introducción.
Voy a utilizar frizz datos punto for each eso me va a permitir acceder a cada registro de forma individual
por lo tanto aquí ponemos usuario y utilizando la sintaxis Yarrow function aquí podría comenzar a crear
el listado de usuarios que se están descargando de esta API.
Voy a crear una ley por cada registro pongo gongs ley igual a document criadita elemento Elai cómo estoy
utilizando criadita element.
Utilizó Tocumen puntos dice el lector y aquí voy a poner aquí se llama mensaje popular como app que
pongo a y le pongo punto en Chile el Elai ahora tengo que ponerle ya el HTML a este ley qué sería el
Lehi punto y mero HTML.
Igual a temples Trunk como aquí y podemos poner el nombre y este nombre de dónde sale.
Bueno expandimos este que está aquí también este y puedes ver que aquí viene Namm lo hice Fierce y luego
dice LASD lo que vimos anteriormente distraccion puede ser muy útil aquí entonces ponemos const abrimos
llaves de usuario para extraer este Namm aquí nada más pongo Nein 2.2 llaves fears.
Eso me va a extraer el nombre necesito también en las Nay puedes extraer todos los valores que desees.
Yo no los voy a extraer el nombre primer nombre segundo nombre y su imagen entonces estoy extrayendo
name Frers que se esta name first de la misma forma voy a extraer Noyce last name Last y también la
imagen por lo tanto está en Picture y hay distintos tamaños Aspic Churín medio en los que quiero traerme
Pizzurno Pizzurno y eso me crearás tres variables.
También podés ver que aquí viene la nacionalidad también me voy a extraer esa y esa viene como NAT
2 para que nombre con el nombre fears Spazio last.
También voy a poner aquí el país que va a ser Nat y finalmente ponemos una imagen de este usuario y
MGC recé sino de dólar iba a ser aquí medio que viene siendo la variable que está extrayendo aquí y
con eso es suficiente puedo guardar cambios en mi marca un error y dice que era Pinchá el del Nul si
este le falta Leydi guardo cambio ahora así puedo guardar y puedes ver que me trae un listado de usuarios
que los imprime ya en mi página o recargar aquí pueden aparecer nuevos usuarios porque esta es una API
que muestra información de usuarios aleatorios puedes continuar cargando aquí por ejemplo ya no cargó
ayer volvió como son 30 usuarios de una Pik externa a veces tardan un poco pero puedes ver que trajo
más información si quieres mostrar más información además para quien con su blog al usuario y voy a
hacerlo más grande con su usuario abre la consola y aquí vas a tener el objeto con toda la información
aplica un distractor como tengo aquí agregando tu template y de esa forma podrás agregar más información
a este resultado.
Puedes ver lo sencillo que lo hace Fetch API para consumir un llamado como este tipo más sencillo que
Ayax la verdad pero ambos siguen siendo muy utilizados.
Ayax estará autoria por muchos años y fecho es la tecnología que viene por lo tanto es bueno aprender
ambos.
Con eso Finalizamos este ejemplo espero te haya gustado y continuamos aprendiendo en el curso.