Fetch API explicada

Cursos

Recursos

Blog

Cada semana nuevos hacks de desarrollo web y diseño.

Guías

Guías completas sobre TS, JS, React, Github y más.

Tutoriales

Ejercicios prácticos para dominar el desarrollo web.

Inicia sesión

Fetch API explicada

Héctorbliss

@hectorbliss

Mira el video si prefieres:

La plataforma, nombre con el que conocemos al grupo de navegadores que ejecutan las aplicaciones que escribimos con HTML, CSS y JS, nos ofrece una amplia gama de APIs, interfaces que nos permiten realizar de todo, desde trabajar con audio o el GPU (unidad de procesamiento gráfico), hasta conectarte con multiples servidores por medio de la Fetch API.

La manera más formal de describir lo que la Fetch API resuelve, podría ser:

Interfaz para conseguir recursos a través de la red o “fetching resources”.

Es importante no confundir la Fetch API con lo que se conoce como AJAX.

Que, curiosamente, tampoco es el nombre adecuado, pues Ajax es metodología, no tecnología, te dejo un link por si quieres saber más.

La Fetch API es un reemplazo de la anterior: XMLHttpRequest o XHR.

Este nombre también es poco afortunado, pues XHR puede conseguir cualquier tipo de dato, no solo XML.

La Fetch API nos ofrece una interfaz moderna y simplificada, que solo utiliza un par de objetos:

Request y Response.

Aprender a utilizar la Fetch API es una muy buena inversión en capital intelectual, es muy saludable para tu carrera. Así que ven conmigo, aprendamos cómo funciona. 🙋🏻

¿Cómo funciona fetch?

fetch() Es un método global, eso significa que está disponible en el entorno de ejecución de todos los navegadores compatibles, que son prácticamente todos, incluyendo a Node.js.

compatibility

Esta amplia compatibilidad es justo lo que la convierte en una herramienta muy importante.

Entonces, con fetch() podemos hacer una solicitud de recursos. Es decir, podemos conectarnos a un servidor a través de la red y conseguir datos, en multiples formatos, incluso se pueden realizar conexiones semipermanentes con WebSockets.

El método fetch() toma un argumento obligatorio; la ruta de acceso al recurso.

fetch() Devuelve una Promise que se resuelve en un Response, aunque exista un error, siempre se recibirá un objeto Response.

fetch() Es configurable a través de un segundo parámetro, un objeto donde se pueden configurar las cabeceras de la petición.

Para entender mejor esto, yo suelo imaginarme que la comunicación que se realiza con fetch(), se hace: intercambiando cajas cerradas, como en un intercambio de regalos, no sabes qué traerá dentro el tuyo, pero sabes que recibirás uno. Esta es también la diferencia principal entre fetch y el JQuery.ajax(). Con fetch() siempre recibiremos un Response.

Una vez que la promesa se resuelve en Response, es momento de enfrentarnos al mundo de los tipos y estructuras, pues existe una amplia gama de opciones para definir el contenido del body (o cuerpo) del Response, podemos recibir blobs, streams, o formData.

Podemos decir que esta API hace una abstracción de HTTP hacia objetos JavaScript.

Haciendo fácil usar este protocolo.

Pero por ahora, vamos despacio, para disfrutar el paisaje. 🏡☺️

¿Cómo lo utilizo?

La petición básica es algo así de simple:

fetch('https://example.com/blissmo')

El string de la URL es realmente el único dato que necesitamos, si tu servidor devuelve una respuesta con status positivo, un 200 por ejemplo, el objeto Response tendrá una llave ok:true y sería false, si fuera un status 500 por ejemplo.

No está de más que le des una memorizada a los códigos de estado de HTTP.

fetch('https://example.com/blissmo')
.then(response => response.json())
.then(data => console.log(data))

Cuando el objeto response está disponible, se solicita el archivo JSON.
Cuando los datos están listos, recibimos un objeto.

Este puede que sea una de las razones del porqué cuando somos principiantes preferimos usar herramientas de más alto nivel, para evitar este pequeño paso de extracción del JSON a partir de un objeto Response.

Pero ¡hey!, fetch() es tan importante en la web, que vale la pena no abstraerla de tus habilidades. 🛡️🗡️

Veamos un par de ejemplos

En este primer ejemplo, quiero mostrarte algunas de las muchas configuraciones que tenemos disponibles.

// Ejemplo implementando el metodo POST:

type Data = {
  answer: string;
};
async function postData(url: string, data: Data): Promise<Data> {
  const response = await fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    mode: "cors", // no-cors, *cors, same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, *same-origin, omit
    headers: {
      "Content-Type": "application/json", // multipart/form-data
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: "follow", // manual, *follow, error
    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // El body cambia su formato en función del "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

// Esta es la parte bonita, la que usas fuera de la abstracción 🤓
// Esta es tu propia creación, tu propia mini-API. 👶🏻 Aquí, tú decides. 😎

postData("https://example.com/answer", {
  answer: "The answer is not 42, is: tacos 🌮",
}).then((data) => {
  console.log(data); // Objeto JSON ya parseado.
});

No es mi intención marearte con este ejemplo, solo mostrarte una vista más amplia de todas las cosas que puedes configurarle a un fetch().

Como son los verbos HTTP, la configuración de cors, la memoria cache, las credenciales, el comportamiento de redireccionamiento, sin lograr incluir en esta descripción, todas las cabeceras que podemos usar, pero te dejo un enlace.

Pero para no quedarnos con las ganas de tirar algo de código y mirar más de cerca a fetch(), vamos a consumir una API pública que devuelve los personajes de la caricatura gringa de moda: Rick y Morty.

const mortyMagic = async () => {
	const response = await fetch('https://rickandmortyapi.com/api/character');
	const data = await response.json();
	const chars = data.results
	document.body.remove();
	chars.forEach(char=>{
		const img = document.createElement('img');
		img.src=char.image;
		document.documentElement.appendChild(img);
	});
}

En esta función llamada mortyMagic, hemos hecho una petición al path o url de la API. Esperamos el objeto Response, para luego esperar los datos en formato JSON.

Una vez que ambas esperas han concluido, estamos listos para trabajar con los datos que vienen en el cuerpo de la respuesta, las llaves que traiga dentro, como en este caso results, va a depender siempre del autor del API y de sus objetivos particulares.

Nosotros hemos utilizado la imagen del personaje que se incluye en los datos, para llenar el navegador de seres multidimensionales. 👽