Fetch

Clase 13 de 26 • Curso de Asincronismo con JavaScript

Maria Gabriela Rodriguez Cuevas

student•

💾 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟭: 𝗙𝗲𝘁𝗰𝗵𝟭𝟭/𝟮𝟭 💾 . 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: .

Ir a la terminal e instalar fetch con: npm i node-fetch
Para poder compilar desde VSC, debemos registrar el modulo en package.json, abrimos el archivo y al final se agrega:

"type": "module"

Importante agregar una coma (,) a la llave que cierra a “dependencies”.
En la ruta src/promise crear el archivo ++challenge.js++
En el archivo challenge.js inicialmente se debe importar lo que acabamos de instalar, agregando el código: import fetch from 'node-fetch';
Dado que la API es una constante, nunca va a cambiar, por convección se coloca en letras mayúsculas: const API = 'https://api.escuelajs.co/api/v1';
Ahora se crea la lógica con fetch, then y catch:

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));

Para correrlo dentro de la consola de VSC, se selecciona el código, se da click derecho y se le da a Run Code. En la salida (OUTPUT) si no arroja error, sale una lista larga de elementos del llamado a la API. .

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: .

Para comentar con shortcut, seleccionar el texto que se quiere comentar y presionar las teclas Ctrl + K luego las sueltas y presionas las teclas Ctrl + C
Para quitar los comentarios con shortcut, seleccionas el texto comentado, presionar las teclas Ctrl + 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

Al correrlo con Run Code, la salida muestra una lista larga con la última palabra impresa Finally.

Raúl Romero Sánchez

student•

En lo personal me sirven de mucho estos apuntes, gracias!!

Emerson David Cabrera Salas

student•

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}`)

Alejandro Sebastian Dubon Estrada

student•

Desde la versión 18 de Node.js se puede utilizar fetch de manera nativa.

Juan David Reyes

student•

Se me hizo raro instalarlo por que ya hacia rato lo usaba sin instalar nada XD, gracias bro

Federico Ivan Llano

student•

Eso estaba pensando y me parecia raro

Marco Palacios Orihuela

student•

Me pareció más fácil usar las promises que las callbacks, pero la pregunta es cuando uso uno y cuando uso el otro. 🤔

Lucas Aristizábal

student•

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.

Catriel Perez

student•

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" ;)

Juan Ramirez

student•

⭐ 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.

Nicolás Leal

student•

Todo es color de rosa cunado comprendes todo maldita sea😄!!

Aunque tengo una duda,

Como podria usar este tipo de conocimiento en mi proyecto?
Osea para que sirve todo esto?
En que lo uso, por ejemplo en mi web page que lo hara ver mas chido?

Brandon Vizcarra

student•

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

Nicolás Leal

student•

ohh okay gracias Brandon.

Cesar Cordova Contreras

student•

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.

Jonathan Jesús Martínez Rodríguez

student•

Excelente ejemplo de uso con axios. Me ha servido mucho, es más comprensible y limpio el código. Muy buen aporte!

German Medina

student•

Pregunta un poco estúpida capas. Pero como se llegan a estas APIs?

Max Andy Diaz Neyra

student•

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)})

Yefreilee Danny Samuel Parra

student•

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!

Julian Ward

student•

Para "descomentarlo" ctrl + U

Gutierrez Diego

student•

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.

Agustin Javier Alvarez Yudica

student•

Compañero, a mi tambien se me dificultó al principio. Pero al final del curso aplicamos de manera practica los conceptos vistos. Paciencia!

Paul Martin Vargas Portugal

student•

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'))

Miguel Enrique Velásquez Millán

student•

¿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`)

Emmanuel Ovares

student•

Justamente eso me estaba preguntando. No encuentro la utilidad de llamar a fetch por medio de una función.

Alejandra Sarahí Monroy Vélazquez

student•

Concuerdo con ustedes compañeros, tampoco le veo una finalidad, pero pongo mi comentario por si alguien del Team Platzi nos soluciona esta duda :)

David Jurado Benito

student•

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...

Esteban Chica

student•

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.

Diego Gabriel Marquez

student•

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';
       ^^^^^

John Fernando Monroy Baracaldo

student•

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. 😁🖖🏻

Deniss Bonilla Paredes

student•

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

Ricardo Ayala Montes

student•

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

Ricardo Zamudio Carbajal

student•

Tengo una pregunta comunidad, gracias!

¿Son equivalentes las dos expresiones siguientes?

.then(response => response.json())

.then((response) => {
response.json()
})

Miguel Enrique Velásquez Millán

student•

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.

Jonathan Forero

student•

En tu segundo segmento de código sería necesaria la palabra reservada return.

.then(response => response.json())

.then((response) => {
  return response.json();
})

John Byron Alzate Hernández

student•

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.

Cristian Marchese

student•

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.

Felix Torres Javier Antonio

student•

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';

Woldev S.A.S

student•

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.

Jorge Enríquez

student•

Colbal Hell

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));

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

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));

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)})

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'))

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

Fetch

Introducción

Lo que aprenderás en este curso

Qué es el asincronismo

Event Loop

Iniciando a programar con JavaScript

Callbacks

Configuración

Qué son los Callbacks

Playground: Ejecuta un callback con 2s de demora

XMLHTTPRequest

Fetch data

Callback hell

Promesas

Qué son las promesas

Playground: Crea una función de delay que soporte asincronismo

Fetch

Fetch POST

Async Await

Funciones asíncronas

Try and catch

Playground: Captura el error de una petición

¿Cómo enfrentar los errores?

Generadores

Generators

Proyecto CV

Proyecto del curso

Consumiendo API

Desplegando el proyecto

Playground: Crea una utilidad para hacer peticiones

Nunca pares de crear

Conclusión

¿Qué camino tomar para seguir aprendiendo?

Autoevaluación de Proyecto: Creación de Landing Page