No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Fetch

13/26
Recursos

Aportes 89

Preguntas 45

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

馃捑 饾棖饾椆饾棶饾榾饾棽 #饾煭饾煭: 饾棛饾棽饾榿饾棸饾椀饾煭饾煭/饾煯饾煭 馃捑
.
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 鈥渄ependencies鈥.
  • 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.

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

Me pareci贸 m谩s f谩cil usar las promises que las callbacks, pero la pregunta es cuando uso uno y cuando uso el otro. 馃

猸 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,

  • 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?

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.

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!

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

Aqu铆 hay explicaci贸n sencilla as铆 como ejemplos de XMLHttprequest y fetch

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鈥

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

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

馃敟 驴C贸mo usar esto en nuestros proyectos?

Te dejo mis apuntes y el tutorial que estuve viendo.


Terminos que usaremos

En JavaScript, los t茅rminos 鈥渇etch鈥, 鈥渁sync-await鈥 y 鈥渢ry-catch鈥 tienen relaci贸n con el manejo de solicitudes y respuestas a trav茅s de la red, mientras que el archivo JSON es un formato de datos com煤nmente utilizado para el intercambio de informaci贸n a trav茅s de la red.

  1. 鈥渇etch鈥: es un m茅todo nativo de JavaScript que permite realizar solicitudes HTTP asincr贸nicas (AJAX) a servidores web y recibir respuestas en formato JSON, texto, blob, entre otros. El m茅todo 鈥渇etch鈥 devuelve una promesa que puede ser resuelta para obtener la respuesta del servidor.

  2. 鈥渁sync-await鈥: es una sintaxis para manejar promesas en JavaScript. Permite que las funciones asincr贸nicas se escriban de una manera m谩s sencilla y legible, sin tener que encadenar m煤ltiples callbacks. La palabra clave 鈥渁sync鈥 se utiliza para definir una funci贸n asincr贸nica, mientras que 鈥渁wait鈥 se usa para esperar a que una promesa se resuelva antes de continuar con la ejecuci贸n.

  3. 鈥渢ry-catch鈥: es un bloque de c贸digo utilizado para manejar errores en JavaScript. El bloque 鈥渢ry鈥 contiene el c贸digo que se ejecutar谩 y el bloque 鈥渃atch鈥 se ejecuta si hay alguna excepci贸n lanzada en el bloque 鈥渢ry鈥. El bloque 鈥渃atch鈥 permite manejar el error y tomar medidas para corregirlo o recuperarse de 茅l.

  4. Archivo JSON: es un formato de datos utilizado para el intercambio de informaci贸n a trav茅s de la red. La sintaxis de JSON es similar a la sintaxis de los objetos JavaScript, lo que lo hace f谩cil de leer y escribir. Los archivos JSON se utilizan com煤nmente para enviar y recibir datos entre servidores y clientes web en aplicaciones basadas en AJAX. En JavaScript, los archivos JSON se pueden leer y manipular utilizando el m茅todo 鈥渇etch鈥 para obtener los datos del servidor y los m茅todos 鈥淛SON.parse鈥 y 鈥淛SON.stringify鈥 para analizar y convertir los datos a objetos JavaScript.

Rick and Morty

Creamos un archivo index.html con esta estructura:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rick and Morty</title>
  </head>
  <body>
    <div id="characters"></div>
    <script src="./main.js"></script>
  </body>
</html>

Agregamos este c贸digo para ver las im谩genes y nombres en la web. Usaremos una API de Rick and Morty:

/* 
馃敟 No Hace falta usar import fetch...
import fetch from "node-fetch"; 
*/
const API = 'https://rickandmortyapi.com/api/character';
let characters = document.querySelector('#characters');

fetch(API)
	.then(response => response.json())
	.then(data => {
		console.log(data.results)

		data.results.map((item) => {
			const content = document.createElement("div");
			content.innerHTML =
				`
			<h4>${item.name}</h4>
			<img src="${item.image}">
			`;
			characters.append(content)
		})
	});

馃敟 No Hace falta usar import fetch, ni instalar el m贸dulo desde consola.

NASA

Para hacer uso de la API de la NASA, debemos registrarnos y luego entramos a APOD.

https://api.nasa.gov/planetary/apod
PNmL8OBHZyiJFCAeRyGdL5qxemQSmOCGln
馃敟 Referencia no real馃憠https://api.nasa.gov/planetary/apod?api_key=PNmL8OBHZyiJFCAeRyGdL5qxemQSmOCGln

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NASA</title>
  </head>
  <body>
    <div id="infoNasa"></div>
    <script src="./main.js"></script>
  </body>
</html>

main.js

let infoNasa = document.querySelector("#infoNasa");
const API = 'https://api.nasa.gov/planetary/apod?api_key=PNmL8OBHZyiJFCAeRyGdL5qxemQSmOCGlni';

const fetchNasa = async () => {
	try {
		const response = await fetch(API);
		const data = await response.json();
		console.log(data);

		const spaceInfo = document.createElement('div');
		spaceInfo.innerHTML = `
		<img src="${data.url}"/>
		<h4>${data.title}</h4>
		<p>${data.explanation}</p>		
		`;

		infoNasa.append(spaceInfo);
	} catch (err) {
		console.log(err);
	}
};

fetchNasa();

Star Wars

馃敟 Debes crear un archivo data.json y agregar datos que puedes obtener con los enlaces del p谩rrafo siguiente.

Revisa swapi.dev, puedes obtener m谩s datos desde la Api Root, aunque esto no tiene im谩genes, por eso decid铆 usar esto starwars-api. Aqu铆 est谩n los datos que agregu茅 Characters

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Star Wars</title>
  </head>
  <body>
	<div id="star-wars"></div>
    <script src="./main.js"></script>
  </body>
</html>

main.js

let starwars = document.querySelector('#star-wars');

fetch('./data.json')
	.then(response => response.json())
	.then(data => {
		console.log(data)
		data.map(item => {
			const content = document.createElement('div');
			content.innerHTML = `
				<h4>${item.name}</h4>
				<img src="${item.image}" width="50%" height="50%">
			`;

			starwars.append(content);
		})
	});

馃敟 Como utilizar fetch, async-await, try-catch + archivo json

//mi manera de hacerlo
fetchData(`${API}/products`)
  .then((response) => response.json())
  .then((response) => {
    console.log(response);
    return fetchData(`${API}/products`)
      .then((response) => response.json())
      .then((response) => response[0].title)
      .then((response) => {
        console.log(response);
        return fetchData(`${API}/products`)
          .then((response) => response.json())
          .then((response) => response[0].category.name)
          .then((response) => console.log(response))
          .catch((error) => console.error(error))
          .finally(() => console.log("Peticion finalizada"));
      });
  });

13/26 Curso de Asincronismo: Fetch

En JavaScript, 鈥渇etch鈥 es una funci贸n que se utiliza para realizar solicitudes de red (por ejemplo, solicitudes HTTP) desde un navegador web o desde un entorno de ejecuci贸n de JavaScript, como Node.js. Fetch se utiliza para recuperar datos de recursos externos, como archivos JSON, im谩genes, API web, y m谩s.


驴C贸mo se utiliza 鈥渇etch鈥 en JavaScript?



Para hacer una solicitud utilizando 鈥渇etch鈥, debes proporcionar la URL del recurso al que deseas acceder. La funci贸n 鈥渇etch鈥 devuelve una promesa que resuelve en una respuesta HTTP. Puedes usar m茅todos encadenados en la promesa para procesar la respuesta.

Aqu铆 hay un ejemplo b谩sico de c贸mo hacer una solicitud GET con 鈥渇etch鈥:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Error de red');
    }
    return response.json(); // Convierte la respuesta a JSON
  })
  .then(data => {
    console.log(data); // Hacer algo con los datos obtenidos
  })
  .catch(error => {
    console.error('Error:', error);
  });


驴Por qu茅 se utiliza 鈥渇etch鈥 en JavaScript?


  1. Acceso a datos remotos: Fetch se utiliza para obtener datos de recursos remotos, como API web, archivos JSON, im谩genes, etc. Esto permite a las aplicaciones web interactuar con servicios en l铆nea y recuperar informaci贸n en tiempo real.

  2. Actualizaciones din谩micas: Fetch es esencial para crear aplicaciones web din谩micas que pueden actualizar su contenido sin necesidad de recargar la p谩gina completa. Puedes usar 鈥渇etch鈥 para cargar datos adicionales a medida que los usuarios interact煤an con tu aplicaci贸n.

  3. Integraci贸n con APIs: Muchas aplicaciones web modernas utilizan APIs para obtener datos y funcionalidades de terceros. Fetch facilita la comunicaci贸n con estas APIs al enviar solicitudes HTTP y recibir respuestas JSON u otros formatos de datos.

  4. Manipulaci贸n de datos asincr贸nicos: Fetch opera de manera asincr贸nica, lo que significa que no bloquea la ejecuci贸n de otras partes de tu c贸digo. Esto es crucial para garantizar una experiencia de usuario fluida en aplicaciones web.


En resumen, 鈥渇etch鈥 es una herramienta esencial en JavaScript para realizar solicitudes de red y acceder a recursos externos, lo que permite a las aplicaciones web interactuar con servicios en l铆nea y proporcionar una experiencia de usuario m谩s din谩mica y enriquecedora.

Espero sea de utilidad. 馃懆鈥嶐煉

Yo no entiendo nada

Me ha gustado mucho, no terminaba de entender fetch y ahora lo tengo muy claro.

Ahora que hay una version 3 de node-fetch
https://www.npmjs.com/package/node-fetch
el import debe ser como

const fetch = require('node-fetch');

https://www.netlify.com/blog/how-to-make-a-fetch-request-using-node-fetch-v3/

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.

tal vez no sea un experto y me cueste mucho aprender esta tem谩tica pero me di cuenta al instante lo del doble console.log xD

aqui les aporto el comando de descaga de node-fetch

npm install node-fetch
import fetch from "node-fetch";
const API = 'https://api.escuelajs.co/api/v1';


function fetchData (urlApi){
  return fetch(urlApi);
}

// fecthData(`${API}/products`)
//   .then(response=>response.json())
//   .then(products =>{
//     console.log(products);
//   })
//   .then(console.log('hola'))
//   .catch(err => console.log(err))

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

FETCH

Ahora que sabemos que son las promesas, vamos a utilizar nuestra API con ellas.
Para eso utilizaremos fetch, al mismo hay que instalarlo desde nuestra terminal de la siguiente manera:

npm i node-fetch

Ahora que ya lo instalamos, podemos utilizarlo en nuestro c贸digo.
El primer paso seria importarlo (Si quieren saber mas sobre importar/exportar pueden revisar el curso de Ecmascript 6+)

import fetch from "node-fetch";

Recordemos que para importar un modulo debemos estar en 鈥渢ype鈥: 鈥渕odule鈥, lo cual esta predeterminado en los navegadores, pero no en nuestro editor de c贸digo. As铆 que deberemos agregar la siguiente linea en nuestro archivo package.json

"type": "module"

Ahora, volviendo a nuestro archivo challenge.js declararemos una constante que ser谩 la url de nuestra API, en este caso estaremos usando la API de la Platzi fake store.

const API = "https://api.escuelajs.co/api/v1";

Perfecto, ya hemos importado fetch y declarado la constante con la url inicial de la API.
Ahora, crearemos la funci贸n fetchData (Puedes revisar la clase 8 de este curso si te olvidaste de que se trataba), el objetivo es el mismo, pero esta vez lo haremos con promesas:

function fetchData(urlAPI){
    return fetch(urlAPI);
}

Ya tenemos la funci贸n creada! ahora es cuesti贸n de llamarla, en este caso la llamaremos para pedirle que nos de un listado de todos los productos, el nombre de un producto, y su categor铆a.

fetchData(`${API}/products`)
.then(response => response.json())
.then(products => {
    console.log(products);
    return fetchData(`${API}/products/${products[1].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);
})

Por ultimo, es fundamental no olvidar utilizar el metodo .catch() por si llega a ocurrir en error.

.catch(error => {
    console.log(error);
})```


No se si el profesor metio de aposta el console.log doble hahahaha pero si cai encuenta.

Buena la clase, hay que practicar y escribir bastante para entender 馃槂

import fetch from "node-fetch"; //previamente en consola sudo npm i node-fetch
const API = 'https://api.escuelajs.co/api/v1';

function fetchData(urlApi) {
    return fetch(urlApi);
};
//no es necesario new Promise porque fetch por defecto ya es una promesa
/* fetchData(`${API}/products`)
    .then(response => response.json())//convierte la respuesta a un objeto .json
    .then(products => {
        console.log(products);//muestra los productos
    })
    .then(() => {
        console.log('Hola');//se pueden aniddar todos los then necesarios
    })
    .catch(error => console.log(error));//manejo de errores */
//para que el c贸digo funcione en VSCode es necesario agregar en package.json ,"type": "module", esto no es necesario en el navegador

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

//de esta manera se obtienen los datos del API con promise, evitando los callbacks hell

me pareci贸 un ejercicio interesante para practicar el concepto de promesa utilizar el fetchData de la case anterior y convertirlo en una funci贸n que retorna una promesa.
NOTA: si vas a utilizar el siguiente script y agregaron en el package.json el 鈥渢ype鈥: 鈥渕odule鈥, debemos quitarlo.

const XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
const API = 'https://api.escuelajs.co/api/v1';

function fetchData(urlApi){
    return new Promise(function (resolve, reject){
        let xhttp = new XMLHttpRequest();
        xhttp.open('GET', urlApi, true);
        xhttp.onreadystatechange = function (event){
            if(xhttp.readyState === 4){
                if(xhttp.status === 200){
                    resolve(xhttp.responseText);
                } else {
                    const error = new Error('Error' + urlApi);
                    reject(error);
                }
            }
        }
        xhttp.send();
    });
}

fetchData(`${API}/products`)
.then(response => JSON.parse(response))
.then(products => {
    console.log(products[0]);
    return fetchData(`${API}/products/${products[0].id}`);
})
.then(response => JSON.parse(response))
.then(product => {
    console.log(product.title);
    return fetchData(`${API}/categories/${product.category.id}`);
})
.then(response => JSON.parse(response))
.then(category => {
    console.log(category.name);
})

Aqui esta como yo tengo guardada la informacion de la clase y lo que se realizo

<code> 
//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.
//Hay que instalar en la terminal -> npm i node-fetch

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);})
    .then(() => {console.log('Hello');})
    .catch(error => console.log(error))*/

fetchData(`${API}/products`)
    .then(response => response.json())
    .then(products => {console.log(products); return fetchData(`${API}/products/${products[50].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(error => console.log(error))
    .finally(() => console.log('Finally'))

Por cierto, cuando Oscar dice 鈥渟e ve un poco Reburujado鈥 se refiere a que se ve confuso, no muy claro, revuelto.

Es algo que se usa mucho en la regi贸n donde vivo en Mexico, busque y es Oscar originario muy cerca de aqu铆, en Torreon. ahora tiene sentido jaja!

![](https://static.platzi.com/media/user_upload/code-cb5183a3-1f01-400b-aa96-5e8207238fe2.jpg)
![](https://static.platzi.com/media/user_upload/image-d8fe9273-c60a-4626-9743-26c5dab256cb.jpg)
me sale este error :(
![](https://static.platzi.com/media/user_upload/image-aa2c4a3d-c6be-4e0e-bf4a-0a9de2b91846.jpg)
```js fetchData(`${API}/products`) // Llama a la funci贸n fetchData con la URL de productos como argumento .then(response => response.json()) // Convierte la respuesta a formato JSON .then(products => { // Ejecuta esta funci贸n cuando la respuesta se convierte en JSON, pasando los productos como argumento console.log(products) // Imprime los productos en la consola return fetchData(`${API}/products/${products[0].id}`) // Retorna una llamada a fetchData con la URL del primer producto como argumento }) .then(response => response.json()) // Convierte la respuesta del primer producto a formato JSON .then(product => { // Ejecuta esta funci贸n cuando la respuesta del primer producto se convierte en JSON, pasando el producto como argumento console.log(product.title); // Imprime el t铆tulo del producto en la consola return fetchData(`${API}/categories/${product.category.id}`) // Retorna una llamada a fetchData con la URL de la categor铆a del producto como argumento }) .then(response => response.json()) // Convierte la respuesta de la categor铆a a formato JSON .then(category => { // Ejecuta esta funci贸n cuando la respuesta de la categor铆a se convierte en JSON, pasando la categor铆a como argumento console.log(category.name); // Imprime el nombre de la categor铆a en la consola }) .catch(err => console.log(err)) // Captura cualquier error que ocurra durante las promesas anteriores y lo imprime en la consola .finally(() => console.log('Finally')); // Ejecuta esta funci贸n despu茅s de que todas las promesas anteriores se completen o fallen, imprimiendo 'Finally' en la consola ```

Algo que no terminaba de entender era el m茅todo .json() y exactamente que retornaba, luego de revisar la documentaci贸n entend铆 que retorna una promesa! Es por esto que podemos usar otro .then() con dicho valor, espero esto pueda aclarar la duda si alguien tambi茅n la tuvo

Por si alguien no entiende, como yo, por qu茅 en los .then en donde se utiliza el m茅todo .json() no se retorna algo, lo que realmente pasa es que s铆 se retorna algo solo que no se utiliza la palabra return gracias a la sintaxis simplificada de las funciones flecha, impl铆citamente en esta sintaxis de una sola l铆nea de c贸digo se esta indicando que el resultado obtenido se retorne. Espero a alguien le ayude.
Okay, este curso si que me apaga el cerebro, y eso que ya he aprendido algo de APIs y Node... de momento continuar茅 la ruta y probablemente aprenda a profundidad estos temas en su momento

驴Que ofrece Fetch?

Fetch ofrece una definici贸n gen茅rica de los objetos聽Request聽y聽Response聽(y otras cosas relacionadas con las solicitudes de red). Esto permitir谩 su uso donde sea necesario en un futuro, ya sea para operadores de servicios, API cach茅 y otras cosas similares que manipulen o modifiquen las solicitudes y respuestas, o cualquier otro tipo de caso de uso que pudiera requerirle la generaci贸n de sus propias respuestas mediante programaci贸n.

Una vez aprendemos a realizar聽peticiones HTTP mediante XHR聽nos damos cuenta que es un mecanismo muy interesante y 煤til, y que nos abre un mundo de posibilidades trabajando con Javascript. Sin embargo, con el tiempo nos vamos dando cuenta tambi茅n, que la forma de trabajar con objetos聽XMLHttpRequest, aunque es muy potente requiere mucho trabajo que hace que el c贸digo no sea tan legible y pr谩ctico como quiz谩s deber铆a.

Entonces es cuando surge聽fetch, un sistema m谩s moderno, basado en promesas de Javascript, para realizar peticiones HTTP as铆ncronas de una forma m谩s legible y c贸moda.

Peticiones HTTP con fetch

Fetch聽es el nombre de una nueva API para Javascript con la cu谩l podemos realizar peticiones HTTP as铆ncronas utilizando promesas y de forma que el c贸digo sea un poco m谩s sencillo y menos verbose. La forma de realizar una petici贸n es muy sencilla, b谩sicamente se trata de llamar a聽fetch聽y pasarle por par谩metro la URL de la petici贸n a realizar:

const promise = fetch("/robots.txt");

promise.then(function(response) {
  /* ... */
});

El聽fetch()聽devolver谩 una聽聽que ser谩 aceptada cuando reciba una respuesta y s贸lo ser谩 rechazada si hay un fallo de red o si por alguna raz贸n no se pudo completar la petici贸n.

El modo m谩s habitual de manejar las promesas es utilizando聽[.then()](https://lenguajejs.com/javascript/asincronia/promesas/), aunque tambi茅n se puede utilizar聽async/await. Esto se suele reescribir de la siguiente forma, que queda mucho m谩s simple y evitamos constantes o variables temporales de un solo uso:

fetch("/robots.txt")
  .then(function(response) {
    /** C贸digo que procesa la respuesta **/
  });

Al m茅todo聽.then()聽se le pasa una funci贸n callback donde su par谩metro聽response聽es el objeto de respuesta de la petici贸n que hemos realizado. En su interior realizaremos la l贸gica que queramos hacer con la respuesta a nuestra petici贸n.

Opciones de聽fetch()

A la funci贸n聽fetch(), al margen de la聽url聽a la que hacemos petici贸n, se le puede pasar un segundo par谩metro de opciones de forma opcional, un聽聽con opciones de la petici贸n HTTP:

const options = {
  method: "GET"
};

fetch("/robots.txt", options)
  .then(response => response.text())
  .then(data => {
    /** Procesar los datos **/
  });

Un poco m谩s adelante, veremos como trabajar con la respuesta聽response, pero vamos a centrarnos ahora en el par谩metro opcional聽options聽de la petici贸n HTTP. En este objeto podemos definir varios detalles:

Campo Descripci贸n
method M茅todo HTTP de la petici贸n. Por defecto,聽GET. Otras opciones:聽HEAD,聽POST, etc鈥
headers Cabeceras HTTP. Por defecto,聽{}.
body Cuerpo de la petici贸n HTTP. Puede ser de varios tipos:聽String,聽FormData,聽Blob, etc鈥
credentials Modo de credenciales. Por defecto,聽omit. Otras opciones:聽same-origin聽e聽include.

Lo primero, y m谩s habitual, suele ser indicar el m茅todo HTTP a realizar en la petici贸n. Por defecto, se realizar谩 un聽GET, pero podemos cambiarlos a聽HEAD,聽POST,聽PUT聽o cualquier otro tipo de m茅todo. En segundo lugar, podemos indicar objetos para enviar en el聽body聽de la petici贸n, as铆 como modificar las cabeceras en el campo聽headers:

const options = {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(jsonData)
};

En este ejemplo, estamos enviando una petici贸n聽POST, indicando en la cabecera que se env铆a contenido JSON y en el cuerpo de los datos, enviando el objeto聽jsonData, codificado como texto mediante聽stringify().

Por 煤ltimo, el campo聽credentials聽permite modificar el modo en el que se realiza la petici贸n. Por defecto, el valor聽omit聽hace que no se incluyan credenciales en la petici贸n, pero es posible indicar los valores聽same-origin, que incluye las credenciales si estamos sobre el mismo dominio, o聽include聽que incluye las credenciales incluso en peticiones a otros dominios.

yo estoy haciendo el curso con typescript porque bueno estoy aprendiedno el lenguaje aprobvechando. No me creeran cuando les digo que aparentemente typescript trae el metodo fetch instalado por lo que al importar node-fetch siempre me daba error, estuve como 30 minutos con ese problema

si

excelente clase

Ahora entiendo por qu茅 los datos que consumo de la API no son los mismos del profe, porque seguramente ya varios estudiantes hicieron post a la API y agregaron productos algo extra帽os, y en algunos casos no le pusieron ni nombre al producto ni a la categor铆a.

Por si alguien le pasa, estuve intentando hacer el llamado pero obtuve un error y al parecer es por que npm detecta que la api no tiene un certificado de confianza entonces no hace el llamado.

Este es el error:
![](

Lo solucione quitando la 鈥榮鈥 de en 鈥榟ttp鈥 y funciono perfecto:

url original: 'https://api.escuelajs.co/'
url modificada: 'http ://api.escuelajs.co/'

Nota: no se si les pase lo que me pas贸 a mi, pero quise seguir practicando con los callbacks y no podia porque me sal铆a un error de que require no esta definido en un modulo ES, hay dos soluciones a esto, eliminar en json 鈥渢ype鈥: 鈥渕odule鈥, o renombrar la extensi贸n .js a .cjs

Si tambi茅n te pareci贸 compleja la estructura de fetchData y sus then(), en el siguiente c贸digo coment茅 cada l铆nea para hacerla m谩s amena.

//callback hell con fetch
fetchData(`${API}/products`) //trae todos los productos
.then(response => response.json()) //como viene en array hay que convertirlo a json


.then(products => {
    return fetchData(`${API}/products/${products[0].id}`) //selecciona el primero que se agregue al array
})
.then(response => response.json()) //como viene en array hay que convertirlo a json


.then(product => { 
    console.log(product.title); 
    return fetchData(`${API}/categories/${product.category.id}`) //trae la categoria del producto
})
.then(response => response.json()) //como viene en array se debe convertir a json


.then(category => {
    console.log(category.name); //imprime la categoria
})
.catch(error => console.log(error))
.finally( () => console.log('done'))

Trayendo datos de usuarios por diversi贸n.

const API = "https://api.escuelajs.co/api/v1";
const mainElement = document.querySelector("main");


function fecthData(urlAPI) {
  return fetch(urlAPI);
};

fecthData(`${API}/users`)
.then(response => response.json())
.then(users => {
  let output="";
  users.forEach(element => {
    output += `<div>${element.name} ${element.email}</div>`
  });
  mainElement.innerHTML = output;
})
.then(() => {
  console.log("ola");
})
.catch((err => {
  console.log(err);
}));

C贸digo de la clase:

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 => {
  return fetchData(`${API}/products/${products[0].id}`)
})
.then(response => response.json())
.then(product => {
  return fetchData(`${API}/categories/${product.category.id}`)
})
.then(response => response.json())
.then(category => console.log(category.name))

me perd铆 con tanto .then xd

13/26 Fetch

Imagina que quieres obtener informaci贸n de un libro de una biblioteca. Para hacerlo, tienes que ir a la biblioteca, hacer una solicitud al bibliotecario y esperar a que te entregue el libro. Una vez que tienes el libro, puedes leer la informaci贸n que contiene.

En la programaci贸n, fetch es una funci贸n que te permite hacer solicitudes de informaci贸n a trav茅s de internet. Puede usarla para obtener datos de una API, como obtener informaci贸n de un libro de una biblioteca en l铆nea.

fetch('https://api.example.com/books/1')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // Hacer algo con los datos obtenidos
  })
  .catch(error => {
    console.error('Error:', error);
    // Manejar el error
  });

Se usa fetch para hacer una solicitud a una URL que representa un endpoint de una API que devuelve informaci贸n sobre un libro.

Luego encadenamos los m茅todos .then() para manejar la respuesta de la solicitud. El m茅todo .json() convierte la respuesta en un objeto JavaScript legilble, y luego podemos acceder a los datos en el bloque de c贸digo dentro del segundo .then(). En este caso, simplemente los imprimimos en la consola.

Si ocurre alg煤n error durante la solicitud, utilizamos el m茅todo .catch() para manejarlo y mostrar un mensaje de error en la consola.

me cae gordo el profe

para comentar las lineas de codigo
CTRL + K y luego CTRL + C

Me genera error la ultima linea de .finally

.finally(() => console.log('Finally'));
^

SyntaxError: Unexpected token '.'

al fin me sale a la primera jaja

me parece que va un poco acelerado, sumaria mucho el aprendizaje si explicara por linea o diera ejemplos.

Por si alguien tiene este error

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'note-fetch' imported from

Apareci贸 en mi m谩quina con Linux. Seg煤n la documentaci贸n es porque el paquete node-fetch se actualiz贸 y ahora se importa de una forma diferente. Para solucionarlo pueden descargar la versi贸n anterior.

npm install node-fetch@2 

SI eres como yo y tienes la inquietud de que eso se puede hacer en una linea, si asi es. asumo que lo hacen de manera didactica pero enreda porque da a entender lo contrario.

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[0])
        console.log(products[0].title)
        console.log(products[0].category.name);
        return fetchData(`${API}/products/${products[0].id}`)
    })
    .catch(error => console.log(error))
    .finally(() => console.log('Se ha termidado de ejecutar el script'));
//1-vamos a traer a node-ferch
import fetch from "node-fetch";
//2-llamaremos a la APi
const API = 'https://api.escuelajs.co/api/v1'
//3-aremos una funcion que resibira la url de la api que nos retornara el llamado de fetch que es una promesa esto nos ayudara a crear elementos con el llamado del primer recurso productos el segundo un solo producto y la categoria  
function fetchData(urlApi){
    return fetch (urlApi);
};
//ahora aremos el llamado de la api 
// fetch(`${API}/products`)
// //utilizaremos then pra saber que nos va arrojar la funcion 
//     .then(response => response.json())//json nos va a transformar los datos que nos arroja la funcion en un objeto json
//     //creamos otro then para crear los productos  
//     .then(products=>{
//         console.log(products);
//     })//si se nos presenta un erro nosotros queremos que se nos muestre y esto lo hacemos con carch
//     .catch(error=>console.log(error));
    //con esto hemos creado el llamado fetch funciona como promesa 
    //si corremos el codigo nos va arrojar un error para solucionarlo tenemos que agregar un tyoe en el archivo package.json 
    //ya despues de aber arreglado el problema y de corre el code vamos nos mostrara multiples objetos 


    //ahora crearemos la logica para hacer varios llamados con fetch y que se consecuente
fetchData(`${API}/products`)//primera solicitud 
    //transformar datos a objeto json 
    .then(response=>response.json( ))//con esto ya tenemos los productos 
    .then(products=>{
        console.log(products.title)
        return fetchData(`${API}/products/${products[0].id}`) //ahora llamaremos a la segunda peticion que es un producto en particular que en este caso es le primero 
    })
    .then(response=>response.json())//ahora la informacion que resibamos del producto lo tranformaremos en un objeto json 
    .then(product=>{
        //y ahora si nos mostrara un producto y nada mas pero en este caso lo que queremos mostrar es la categoria 
        console.log(console.log(product.title))
        return fetchData(`${API}/categories/${product.category.id}`)
    })
    .then(response=>response.json())
    .then(category=>{
        console.log(category.name);
    })//ahora nos dara la respuesta de la acterior solicitud de un objeto en dado caso 
    .catch(err =>console.log(err))
    .finally(()=>console.log('Finally'));

Les dejo la API por ac谩

const API = "https://api.escuelajs.co/api/v1";

Si les sale este error

import fetch from 'node-fetch';
       ^^^^^

SyntaxError: Unexpected identifier

Yo lo solucion茅 actualizando mi version de nodejs

muy buena explicaci贸n, le entendi facilmente sobre Fetch, 鈥渢raer datos de un API鈥, me costaba entenderle igual que el post 鈥渁gregar datos al api鈥

Si quedaron con ganas de ver lo que explicado por el profe en la creacion de un sitio web, les recomiendo vean este video en el que el profe Carlos consume la API de Rick y Morty en 10min y presenta los datos de manera genial.

Me estaba constando enteder fetch, ahora tengo mas claro como usarlo, vamos que si se puede, no se den por vencidos

Chicos, a mi me salio un error al ejecutar el codigo con la extencion de visual de run code:

internal/process/esm_loader.js:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. Received protocol 'node:'
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:782:11)
    at Loader.resolve (internal/modules/esm/loader.js:85:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:229:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:51:40)
    at link (internal/modules/esm/module_job.js:50:36) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}

El cual investigue y el error era la versi贸n de NODE que tenia instalada, as铆 que pase de estar en la versi贸n 14.15.4 a la 16.14.0.

Luego de eso si me dejo correr el codigo.

me da este error

[Running] node "/home/ivancholuna/Projects/AsincronismoJS/asincronismo/src/promises/tempCodeRunnerFile.js"
/home/ivancholuna/Projects/AsincronismoJS/asincronismo/src/promises/tempCodeRunnerFile.js:1
import fetch from 'node-fetch';
       ^^^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

No me habia quedado a gusto. me hubiera gustado que explique desde 0 como funciona 鈥淔ETCH鈥 que dentro muy dentro utiliza el objeto XMLHttpRequest entonces aplique lo de la clase de callbacks con las promises!

PD: no esta mal. solo es mi curiosidad!!

let API = 'https://rickandmortyapi.com/api'

function fetchData(apiURL){
    return new Promise((resolve,reject)=>{
        let xhr = new XMLHttpRequest()
        xhr.addEventListener('readystatechange',(e)=>{
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    resolve(JSON.parse(xhr.responseText))
                }else{
                    let error = new Error('HUBO UN ERROR')
                    reject(error)
                }
            }
        })
        xhr.open('GET',apiURL)
        xhr.send()
    })
}

fetchData(`${API}/character`)
.then(data1 =>{
    console.log('Todos los personajes son: ')
    console.table(data1.results)
    return fetchData(`${API}/character/${data1.results[0].id}`)
})
.then(data2 => {
    console.log(`Pero elejiste el personaje: ${data2.name}`)
    return fetchData(`${API}/location/${data2.id}`)
})
.then(data3 => {
    console.log(`Y el personaje reside en: ${data3.name}`)
})

Mi aporte para el error de modulos:
Otra forma practica para resolver y poder ver por consola lo que trae la consulta es en la extensi贸n del archivo _chalenge.js _agregarle la m de la siguiente forma: challenge.mjs.
As铆 ejecuta nuevamente y ya pueden ver por consola el resultado 馃槉

Bastante bueno, aunque me hubiera quedado al nivel de listar todos todos los productos y luego responder a un evento de usuario para acceder al detalle de ese en especial.

bendito seas fetch :v

Si les regresa undefined al ejecutar challenge.js en node, es necesario agregar un return al momento de transformar nuestra respuesta a un archivo json

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

De esta manera es posible correr el archivo challenge.js

Muy excelente curso, mejoro demasiado a la anterior version

a partir de la version de la version numero 18 de node.js se puede utilizar fetch de forma nativa de esta manera ya no se debe instlar la dependencia de fetch no hacer el import inicial.
el codigo quedaria de la siguiente manera:

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.error(error));

Hola, yo lo resolv铆 de otra forma tambi茅n usando promesas pero usando una l贸gica m谩s similar a la que usamos en el challenge anterior con callbacks

fetchData(`${API}/products`)
  .then(response => response.json())
  .then(products => {
    fetchData(`${API}/products/${products[0].id}`)
    .then(response => response.json())
    .then(product => {
        fetchData(`${API}/categories/${product?.category?.id}`)
        .then(response => response.json())
        .then(category => {
            console.log(products[0]);
            console.log(product.title);
            console.log(category.name);
          })
          .catch(error => console.error(error))
      })
      .catch(error => console.error(error))
  })
  .catch(error => console.error(error))
  .finally(() => console.log('Finally'))

Hay algo muy interesante, y es que cuando importamos node-fetch, no es necesario utilizar el ASYNC para invocar el await. Alguien sabe por qu茅?

Por aqu铆 les dejo lo que he hecho antes de ver el video, leyendo previamente: esto.

const option = { // Request option
    method: 'GET',
    headers: {
      "Content-Type": "application/json"
    },
    credentials: 'omit',
  };
  
  const API = 'https://api.escuelajs.co/api/v1';
  
  const savedData = []; // To save the first products, the title of the products and the name of the category
  
  // Functio to verify status of request
  function requestOk(response) {
    if(!response.ok) {
      throw new Error(response.status)
    }
    
    return response.json();
  }
  
  // The first method
  
  const firstMethod = fetch(`${API}/products`, option)
      .then((response1) => { // Validation of the call to products
        return requestOk(response1);	
  })
      .then((response2) => { // Request the first product by the Id
        const firstProduct = response2[0];
        const firstProductId = firstProduct.id;
      
        return fetch(`${API}/products/${firstProductId}`, option);
  })
      .then((response3) => { // Validation of the call to the first products
        return requestOk(response3);
  })
      .then((response4) => { // Request the category by the Id
        savedData.push(response4); // Save the first product
        savedData.push(response4.title); // Save the title of the first product
    
        const category = response4.category;
        const categoryId = category.id;
          
        return fetch(`${API}/categories/${categoryId}`);
  })
      .then((response5) => { // Validation of the call to the category
            return requestOk(response5);
  })
      .then((response6) => {
          savedData.push(response6.name);
    
        // Show the colected data
        savedData.forEach((v, i, a) => {
        console.log(v);
        });
  })
      .catch((error) => {
        console.error(error);
  }); 
  
  // Second method
  const secondMethod = fetch(`${API}/products`, option)
      .then((response1) => { // Validation of the call to products
        return requestOk(response1);
  })
      .then((response2) => { // Request the first product by the Id
        const firstProduct = response2[0];
        const firstProductId = firstProduct.id;
      
        fetch(`${API}/products/${firstProductId}`, option)
        .then((response3) => { // Validation of the call to the first products
            return requestOk(response3);
      })
        .then((response4) => { // Request the category by the Id
        const category = response4.category;
        const categoryId = category.id;
  
        fetch(`${API}/categories/${categoryId}`)
        .then((response5) => { // Validation of the call to the category
          return requestOk(response5);
        })
        .then((response6) => {
            console.log(firstProduct);
          console.log(firstProduct.title);
          console.log(response6.name);
        })
        .catch((error) => {
          console.error(error);
        })
      })
      .catch((error) => {
        console.error(error);
      })
    })
      .catch((error) => {
        console.error(error);
  });

seg煤n tengo entendido tambi茅n se puede resolver el problema de los m贸dulos con solo a帽adir una M a la extensi贸n del archivo, quedar铆a as铆

challenge.mjs

y as铆 nos ahorramos en ir hasta el package.json y poner type module etc.

Resumiendo un poco el codigo sin estar realizando mucho el reponse.json() lo ise de esta forma.

import fetch from "node-fetch";

const API = 'https://api.escuelajs.co/api/v1';

function fetchData(url) {
    return fetch(url).then(response => response.json());
}

const onError = (error) => console.log(error);

fetchData(`${API}/products`)
    .then(products => {
        let product = products[0];
        console.log(product);
        return fetchData(`${API}/products/${product.id}`);
    })
    .then(product => {
        console.log(`Producto: ${product.title}`);
        return fetchData(`${API}/categories/${product?.category?.id}`);
    })
    .then(category => {
        console.log(`Categoria: ${category.name}`);
    })
    .catch(onError).finally('Finally');

excelente explicacion

Hola, esto es lo que logre hace usando la API de pokemon.
Que les parace?
Que le podria mejorar a este tipo de llamado?

import fetch from "node-fetch";
const API = 'https://pokeapi.co/api/v2'

let fetchData = (urlApi)=>{
    return fetch(urlApi)
};
//This is the first API calling to fetch a pokemon list
 fetchData(`${API}/pokemon`)
.then( response => response.json() )
.then(data => {
    const pokemon = data.results[0]
    console.log(`Name: ${pokemon.name}`)
    //This is a new addition to the url using the information we fetched from the API 
   return fetchData(`${API}/pokemon/${pokemon.name}`)
    .then(response => response.json() )
    .then(data2 => {
       const abilities = data2.abilities
       //here we accede to the object information and extract the ability information
       const ability = abilities[1]
       console.log(`Ability name: ${ability.ability.name}`)
       const abilityAPI = ability.ability.url
       //here we fetch the url to access the abilities description
        return fetchData(abilityAPI)
        .then(response => response.json())
        //here we finally get the ability information and description we want
        .then(description => {
            const effect = description.effect_entries[1].effect
            console.log(`Effect name: ${effect}`)
        })
    })
})



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)
        return fetchData(`${API}/products/${products[0].id}`)
    })
    .then(response => response.json())
    .then(products => {
        console.log(products.title)
        return fetchData(`${API}/categories/${products.category.id}`)
    })
    .then(response => response.json())
    .then(category => {
        console.log(category.name);
    })
    .catch(err => console.log(err))
    .finally(() => console.log('Finally'));

Para practicar lo aprendido, lo hice tambi茅n de esta otra forma:

Me gusta como qued贸, je je, se ve bonito 鉁.

Dejar茅 tambi茅n por aqu铆 el c贸digo que escrib铆 para ello:

import fetch from "node-fetch";
const API = "https://api.escuelajs.co/api/v1";

fetch(`${API}/products`)
	.then(response => response.json())
	.then(products => {
		const product = products[0];
		console.group("Product Obtained:");
			console.log(`路) Title: ${product.title}`);
			console.log(`路) Category: ${product.category.name}`);
			console.group("路) Full Object:");
				console.log(product);
			console.groupEnd();
		console.groupEnd();
	})
	.catch(error => console.log(`There was an error: ${error}`))
	.finally(() => console.log(`All done!`));