Maria Gabriela Rodriguez Cuevas
Raúl Romero Sánchez
Emerson David Cabrera Salas
Alejandro Sebastian Dubon Estrada
Juan David Reyes
Federico Ivan Llano
Marco Palacios Orihuela
Lucas Aristizábal
Catriel Perez
Juan Ramirez
Nicolás Leal
Brandon Vizcarra
Nicolás Leal
Cesar Cordova Contreras
Jonathan Jesús Martínez Rodríguez
German Medina
Max Andy Diaz Neyra
Yefreilee Danny Samuel Parra
Julian Ward
Gutierrez Diego
Agustin Javier Alvarez Yudica
Paul Martin Vargas Portugal
Miguel Enrique Velásquez Millán
Emmanuel Ovares
Alejandra Sarahí Monroy Vélazquez
David Jurado Benito
Esteban Chica
Diego Gabriel Marquez
John Fernando Monroy Baracaldo
Deniss Bonilla Paredes
Ricardo Ayala Montes
Ricardo Zamudio Carbajal
Miguel Enrique Velásquez Millán
Jonathan Forero
John Byron Alzate Hernández
Cristian Marchese
Felix Torres Javier Antonio
Woldev S.A.S
Jorge Enríquez
💾 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟭: 𝗙𝗲𝘁𝗰𝗵𝟭𝟭/𝟮𝟭 💾
.
Por medio de ++Fetch++ se puede realizar peticiones HTTP asíncronas de JavaScript (JS) con promesas. La API Fetch proporciona una interfaz JS más cómoda para acceder y manipular; fetch() es un método global.
.
🛠️ Para poder usar fetch, primero tenemos que instalarlo:
.
npm i node-fetch"type": "module"
src/promise crear el archivo ++challenge.js++import fetch from 'node-fetch';const API = 'https://api.escuelajs.co/api/v1';import fetch from 'node-fetch'; const API = 'https://api.escuelajs.co/api/v1'; //función que va a recibir como argumento la url que queremos llamar y esto retornará el llamado de fecth: una promesa function fetchData(urlApi){ return fetch(urlApi); }; //el llamado fetchData(`${API}/products`) .then(response => response.json()) .then(products => { console.log(products); }) .then(() => { console.log('hola'); }) //se pueden anidar múltiples .then .catch(error => console.log(error));
Continuando con la clase, para compilar el segundo ejemplo debemos comentar fetchData() para evitar problemas de compilación.
.
🖊️ ++¿Cómo comentar en JavaScript?++
.
En JS se comenta cada línea con doble slash // o se puede comentar todo un párrafo iniciando con slash + asterisco /* y finalizar con asterisco + slash */
.
Pero para ahorrar tiempo se puede usar los shortcuts de VSC, se pueden ver y editar en File>Preferences>Keyboard Shortcuts o pulsando las teclas Ctrl + K Ctrl + S:
.
Ctrl + K luego las sueltas y presionas las teclas Ctrl + CCtrl + K luego las sueltas y presionas las teclas Ctrl + U
.✏️ El código del segundo ejemplo queda:
fetchData(`${API}/products`) .then(response => response.json()) //se hace la conversión a un objeto json .then(products => { console.log(products); return fetchData(`${API}/products/${products[0].id}`) // solo se quiere mostrar el primer elemento de la primera solicitud }) .then(response => response.json()) //se vuelve traer la data .then(product => { console.log(products.title); return fetchData(`${API}/categories/${product.category.id}`) //se quiere mostrar la categoria de un producto en particular }) .then(response => response.json()) .then(category => { console.log(category.name); }) .catch(err => console.log(err)) //detectar un error .finally(() => console.log('Finally')); //es opcional para mostrar que se terminó la solicitud
.
En lo personal me sirven de mucho estos apuntes, gracias!!
Tuviste un typo en el then del segundo llamado: en lugar de products, debe ir product (sin la "s"). De resto, genial tu aporte, como siempre. Gracias.
.then(product => { console.log(products.title); return fetchData(`${API}/categories/${product.category.id}`)
Desde la versión 18 de Node.js se puede utilizar fetch de manera nativa.
Se me hizo raro instalarlo por que ya hacia rato lo usaba sin instalar nada XD, gracias bro
Eso estaba pensando y me parecia raro
Me pareció más fácil usar las promises que las callbacks, pero la pregunta es cuando uso uno y cuando uso el otro. 🤔
los callbacks es una forma viejita, para ser mas entendible el código, tú decides cuál eliges si callbacks o promises. los callbacks se pueden cuando solo vas a hacer máximo 3 llamados a una API, sino a eso le llamaríamos callback hell. las promesas vinieron para eso, para evitar el callback hell y hacer más llamadas a una API y hacer nuestro código mas simple.
Todas son herramientas con sus pros y contras. pero creo que si necesitas enlazar pocas funciones te sirven los callback. para pedidos a una API ya hay herramientas mas modernas que lo hacen mas "aburrido" ;)
⭐ Fetch:
Nos permite realizar peticiones HTTP asíncronas utilizando promesas y de forma que el código sea un poco más sencillo y menos verboso.
Básicamente llamamos a Fetch y le pasamos como parámetro la URL de la petición.
const request = fetch(API);
Fetch devolvera una promesa, la cual le podremos aplicar los métodos then y catch
fetch(API) .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.log(err));
Se pueden anidar multiples then para hacer lógicas consecuentes.
Todo es color de rosa cunado comprendes todo maldita sea😄!!
.
Aunque tengo una duda,
Literalmente puedes hacer fetch de la data de cualquier API (siempre y cuando tengas autorización) para mostrar la info en tu página web Ejemplo: Puedes hacer fetch de la data de una API de clima y mostrarlo en tu pagina como valor agregado
ohh okay gracias Brandon.
En las notas de un compañero del curso pasado comentó sobre una librería llamada axios que nos ayudaba a hacer las peticiones de una manera más sencilla me anime a intentarlo a hacer el codigo con esa librería y el resultado fue este se redujo mucho el codigo :
import axios from 'axios'; const API = 'https://api.escuelajs.co/api/v1'; axios.get(`${API}/products`) .then((products) => { console.log(products.data[0]); return axios.get(`${API}/products/${products.data[0].id}`); }) .then((product) => { console.log(product.data.title); console.log(product.data.price); return axios.get(`${API}/categories/${product.data.category.id}`); }) .then((category) => console.log(category.data.name)) .catch((err) => console.error(err));
por si a alguien le interesa solo utiliza npm i axios y listo ya lo puedes utilizar aquí dejo documentacion recuerden que antes de correr tenemos que caminar para utilizar estos frameworks y saber que esta pasando tenemos que estudiar muy bien las bases para dominar estas ayudas.
Excelente ejemplo de uso con axios. Me ha servido mucho, es más comprensible y limpio el código. Muy buen aporte!
Pregunta un poco estúpida capas. Pero como se llegan a estas APIs?
Aqui les traigo una forma de escribir la funcion fetchData para no tener que escribir en cada peticion la conversion a formato json
import fetch from "node-fetch"; const API = 'https://api.escuelajs.co/api/v1'; //función que va a recibir como argumento la url que queremos llamar y esto retornará el llamado de fecth: una promesa function fetchData(urlApi){ return fetch(urlApi).then(response => response.json()); }; fetchData(`${API}/products`) .then(products =>{ console.log(products[0]); return fetchData(`${API}/products/${products[0].id}`) }) .then(product=>{ console.info(product.title) return fetchData(`${API}/categories/${product?.category?.id}`) }) .then(category=>{ console.info(category.name) }) .catch(err=>{ console.error(err)})
Para el que todavía no lo sepa, para comentar todo lo seleccionado en VSC, solo tienes que seleccionar lo que quieres comentar, y luego pulsar CTRL+K, seguido de CTRL+C, espero les sirva, saludos!
Para "descomentarlo" ctrl + U
Quiero darle la duda al profesor en cuanto a su forma de llevar el curso, para muchos de seguro es mucho más fácil de entender y obviamente no es solo quedarse con este curso, pero creo que sería mucho más fácil para a quellos que se nos dificulta, que hiciera un ejemplo real, es decir, tiene una web x ( y que podamos verla) y va a traer de la API x productos y la va a mostrar en dicha web pero que sea visible lo que está trayendo. Monse si me explico! Llevo todo el curso tratando de entender y me cuesta.
Compañero, a mi tambien se me dificultó al principio. Pero al final del curso aplicamos de manera practica los conceptos vistos. Paciencia!
import fetch from "node-fetch"; const API = 'https://api.escuelajs.co/api/v1'; function fetchData(urlApi){ return fetch(urlApi); }; /*fetchData (`${API}/products`) .then(response => response.json()) .then(products => { console.log(products); }) .catch(error => console.log(error))*/ fetchData(`${API}/products`) .then(response => response.json()) .then(products=> { console.log(products); return fetchData (`${API}/products/${products[0].id}`) }) .then(response => response.json()) .then(product => { console.log(product.title) return fetchData (`${API}/categories/${product.category.id}`) }) .then(response => response.json()) .then(category => { console.log(category.name); }) .catch(err => console.log(err)) .finally (()=> console.log('Finally'))
¿En vez de crear una función ++fetchData++ no podríamos usar directamente el ++fetch++ que importamos de node-fetch? 🤔. · O sea, en vez de hacer:
function fetchData(urlApi){ return fetch(urlApi) } fetchData(`${API}/products`)
· ¿No podríamos hacer directamente?
fetch(`${API}/products`)
Justamente eso me estaba preguntando. No encuentro la utilidad de llamar a fetch por medio de una función.
Concuerdo con ustedes compañeros, tampoco le veo una finalidad, pero pongo mi comentario por si alguien del Team Platzi nos soluciona esta duda :)
Vengo haciendo toda la ruta sin ningún problema y este curso deja mucho que desear. No explica la mitad de los conceptos que utiliza. Muy mal...
Terrible curso la verdad. Debemos entenderlo pero me he tenido que apoyar en videos de youtube en casa clase, y he aprendido más de los cometnarios de la comunidad que de las clases en si.
Me dice el siguiente error al ejecutar el codigo, ya instale el node-fetch
/home/diego/Javascript/4. Asincronismo/src/promise/tempCodeRunnerFile.js:1 import fetch from 'node-fetch'; ^^^^^
Hola a mi me paso lo mismo y en mi caso era la version de Node la actualice a la v16.15.1 la version estable. 😁🖖🏻
hola @johnfmonroybpro ¿cómo le hiciste para actualizar la versión de Node? ¿desinstalaste tu versión de Node.js que ya tenías? Yo estoy en Windows 10 y eso WSL 20.04
Si no estas muy familiarizado con arrow function ve el primer then
fetchData(`${API}/products`) .then(function (response) { console.log("ejemplo de más validaciones"); return response.json(); // regresa el primer llamado }) .then((products) => { //console.log(products); return fetchData(`${API}/products/${products[0].id}`); // se lanza el fetch para solicitar solo un producto }) .then((response) => response.json()) //respuesta del segundo llamado .then((product) => { console.log(product); //trae el poducto return fetchData(`${API}/categoriess/${product.category.id}`); // se lanza el fetch para obtene el id de la categoria del unico producto }) .then((response) => response.json()) // respuesta del tercer llamado .then((category) => { console.log(category); //trae la categoria console.log(category.name); // imprime la categoria del producto }) .catch((error) => console.error("Error " + error)) // si existe error .finally(() => console.log("Finally")); // finally
Tengo una pregunta comunidad, gracias!
¿Son equivalentes las dos expresiones siguientes?
.then(response => response.json())
.then((response) => { response.json() })
Si no estoy mal, sip, son equivalentes. · De todas formas siempre puedes confirmarlo intentando ejecutar el código visto en la clase cambiando una expresión por la otra y ver si todo sigue funcionando correctamente, je je. Pero en teoría, sí, son equivalentes.
En tu segundo segmento de código sería necesaria la palabra reservada return.
.then(response => response.json())
.then((response) => { return response.json(); })
Recuerden que para ahorrarse el paso del package.json, pueden simplemente renombrar el archivo como Challenge.mjs
de esa forma la m transformará el archivo js en módulo.
Hasta el minuto 6 estaba totalmente perdido. Podría haber arrancado diciendo que fetch ya es una promesa por defecto, y así poder ir siguiendo mejor el video.
Les dejo el link de la API, lo escribí mal dos veces
import fetch from 'node-fetch'; const API = 'https://api.escuelajs.co/api/v1';
En lugar de añadir tu módulo a tu package.json, puedes simplemente cambiar el formato de tu archivo .js por .msj y ya el intérprete de JavaScript lo tratará como un módulo.
Colbal Hell