JavaScript Fetch: solicitudes a la API sin código innecesario

JavaScript fetch es una forma integrada de enviar peticiones a la API manteniendo el código claro. Además de la solución estándar GET para solicitudes de datos, la API también puede utilizarse para enviar, modificar y eliminar datos.

¿Qué es JavaScript fetch y para qué sirve?

JavaScript fetch es una forma de hacer peticiones API con Promises. Este tipo de interacción evita que el código se vuelva confuso y además ofrece otras numerosas funciones. JavaScript fetch envía una petición a un servidor y la ejecuta en segundo plano. En este artículo, te explicamos exactamente cómo funciona y qué opciones te ofrece la API fetch.

Las ventajas de un objeto Promise

Para comprender el funcionamiento de fetch en JavaScript, es necesario echar un vistazo a los objetos Promise. Las promesas, introducidas con JavaScript ES6, están diseñadas para facilitar y manejar las operaciones asíncronas. Como su nombre sugiere, un objeto promise es una especie de promesa: si se cumple, el código funciona y se obtiene un valor. Si la promesa no se cumple, se recibe un objeto de error como respuesta. Como reemplazo o complemento de un callback, las promesas hacen que los procesos asíncronos sean más confiables y mejoran la legibilidad del código.

Las promesas pueden tener los estados “pending” (pendiente), “fulfilled” (cumplida) o “rejected” (rechazada).

• pending: la operación aún no se ha ejecutado o cancelado.
• fulfilled: la operación se ha ejecutado correctamente.
• rejected: la operación ha fallado.

En el caso de “fulfilled” y “rejected”, puedes reaccionar con métodos como then() o catch. JavaScript fetch hace uso de estas opciones y utiliza las promesas para ejecutar una petición XHR a un servidor.

Cómo funciona fetch en JavaScript

La sintaxis básica de fetch en JavaScript puede explicarse de forma sencilla. Es de esta forma:

fetch()

El método puede tener en cuenta dos argumentos. Uno es una URL, que se introduce con comillas entre los dos paréntesis. El segundo es un objeto con opciones, que no tiene por qué utilizarse. Se utiliza después de la instrucción propiamente dicha.

Para ilustrar mejor la funcionalidad y la estructura, te mostramos el siguiente código de ejemplo:

fetch(url) 
.then(function() {
})
.catch(function() {
});

En el primer paso, almacenamos la URL de la API teórica como parámetro. Esto es seguido por el método promise then(), que se extiende por una función. Ésta se ejecutará cuando promise devuelva la variable resolve. resolve se utiliza si una acción debe ser declarada como exitosa. La función de then() contiene el código necesario para manejar los datos recibidos de la API.

Debajo hemos utilizado el método catch(). Este es llamado cuando la variable reject es devuelta. La variable reject se devuelve si no se puede llamar a la API o se producen otros errores. En este caso, la función se ejecuta dentro de catch(). De esta manera, con solo tres líneas de código, estás preparado para todas las eventualidades y puedes iniciar solicitudes a la API con fetch de JavaScript.

Peticiones GET con fetch de JavaScript

Puedes utilizar fetch de JavaScript para recuperar datos de una API. En el siguiente ejemplo, realizamos una solicitud GET. Esta es la configuración por defecto de fetch. Para ello, ahora almacenamos otra URL de ejemplo. Esta responderá con una promesa, a la que aplicamos el método then(). A continuación convertimos la respuesta del servidor en un objeto JSON y volvemos a utilizar el método then() para mostrar en la consola los datos así obtenidos. Un código adecuado para la operación podría ser el siguiente:

fetch("https://ejemplourl.com/api")
.then((response) => response.json())
.then((json) => console.log(json));

Enviar datos con POST

Aunque la petición GET es la estándar, también puedes realizar operaciones POST con fetch. Estas se utilizan para enviar datos. De nuevo, primero debemos especificar la URL deseada. Luego usamos la clave method para especificar el tipo de petición. En nuestro caso, tiene el valor “POST”. A esto le siguen otras dos claves obligatorias: body y headers.

body define los datos que se enviarán al servidor. En nuestro caso, la clave consiste en los parámetros title y body. También utilizamos JSON.stringify para convertir los datos en una cadena. headers se utiliza para especificar el tipo de datos que se enviarán al servidor. En nuestro caso, deben ser datos JSON y seleccionamos la codificación estándar UTF-8. Ambas claves deben definirse para una petición POST. Para nuestro ejemplo anterior, el código correspondiente tendría ahora este aspecto:

fetch("https://ejemplourl.com/api", {
method: "POST",
body: JSON.stringify({
title: "Aquí está el título",
body: "Aquí está el contenido",
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));

Actualizar objetos con PUT o PATCH

Un objeto puede actualizarse completamente con una petición PUT o PATCH. Esto también es posible con fetch. El enfoque es similar al ejemplo anterior. Debe haber de nuevo una opción body con string o JSON.stringify y especificamos el tipo de contenido mediante application/json. Este es el código de nuestro ejemplo:

fetch("https://ejemplourl.com/api", {
method: "PUT", 
body: JSON.stringify({ 
title: "Aquí está el título", 
body: "Aquí está el contenido", 
}), 
headers: { 
"Content-type": "application/json; charset=UTF-8", 
}, 
}) 
.then((response) => response.json()) 
.then((json) => console.log(json));

En lugar de PUT, también puedes utilizar PATCH como alternativa.

Eliminar objetos con DELETE

Si quieres utilizar fetch para eliminar un objeto, puedes utilizar una solicitud DELETE. Si es necesario, también puedes implementar el método then(). Este sería un ejemplo:

fetch("https://ejemplourl.com/api", { 
    method: "DELETE", 
}) 
.then(() => { 
    elemento.HTML = "Eliminado con éxito"; 
}) 
.catch((error) => { 
    console.error('Error en la solicitud:', error); 
});