Ja­va­S­cri­pt Fetch: so­li­ci­tu­des a la API sin código in­ne­ce­sa­rio

Ja­va­S­cri­pt fetch es una forma integrada de enviar pe­ti­cio­nes a la API ma­n­te­nie­n­do el código claro. Además de la solución estándar GET para so­li­ci­tu­des de datos, la API también puede uti­li­zar­se para enviar, modificar y eliminar datos.

¿Qué es Ja­va­S­cri­pt fetch y para qué sirve?

Ja­va­S­cri­pt fetch es una forma de hacer pe­ti­cio­nes API con Promises. Este tipo de in­ter­ac­ción evita que el código se vuelva confuso y además ofrece otras numerosas funciones. Ja­va­S­cri­pt fetch envía una petición a un servidor y la ejecuta en segundo plano. En este artículo, te ex­pli­ca­mos exac­ta­me­n­te cómo funciona y qué opciones te ofrece la API fetch.

Las ventajas de un objeto Promise

Para co­m­pre­n­der el fu­n­cio­na­mie­n­to de fetch en Ja­va­S­cri­pt, es necesario echar un vistazo a los objetos Promise. Las promesas, in­tro­du­ci­das con Ja­va­S­cri­pt ES6, están diseñadas para facilitar y manejar las ope­ra­cio­nes así­n­cro­nas. 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 co­m­ple­me­n­to de un callback, las promesas hacen que los procesos así­n­cro­nos sean más co­n­fia­bles y mejoran la le­gi­bi­li­dad 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 co­rre­c­ta­me­n­te.
• rejected: la operación ha fallado.

En el caso de “fulfilled” y “rejected”, puedes reac­cio­nar con métodos como then() o catch. Ja­va­S­cri­pt fetch hace uso de estas opciones y utiliza las promesas para ejecutar una petición XHR a un servidor.

Cómo funciona fetch en Ja­va­S­cri­pt

La sintaxis básica de fetch en Ja­va­S­cri­pt puede ex­pli­car­se de forma sencilla. Es de esta forma:

fetch()

El método puede tener en cuenta dos ar­gu­me­n­tos. Uno es una URL, que se introduce con comillas entre los dos pa­ré­n­te­sis. El segundo es un objeto con opciones, que no tiene por qué uti­li­zar­se. Se utiliza después de la in­s­tru­c­ción pro­pia­me­n­te dicha.

Para ilustrar mejor la fu­n­cio­na­li­dad y la es­tru­c­tu­ra, te mostramos el siguiente código de ejemplo:

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

En el primer paso, al­ma­ce­na­mos 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 eve­n­tua­li­da­des y puedes iniciar so­li­ci­tu­des a la API con fetch de Ja­va­S­cri­pt.

Pe­ti­cio­nes GET con fetch de Ja­va­S­cri­pt

Puedes utilizar fetch de Ja­va­S­cri­pt para recuperar datos de una API. En el siguiente ejemplo, rea­li­za­mos una solicitud GET. Esta es la co­n­fi­gu­ra­ción por defecto de fetch. Para ello, ahora al­ma­ce­na­mos otra URL de ejemplo. Esta re­s­po­n­de­rá con una promesa, a la que aplicamos el método then(). A co­n­ti­nua­ción co­n­ve­r­ti­mos 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 ope­ra­cio­nes POST con fetch. Estas se utilizan para enviar datos. De nuevo, primero debemos es­pe­ci­fi­car la URL deseada. Luego usamos la clave method para es­pe­ci­fi­car el tipo de petición. En nuestro caso, tiene el valor “POST”. A esto le siguen otras dos claves obli­ga­to­rias: body y headers.

body define los datos que se enviarán al servidor. En nuestro caso, la clave consiste en los pa­rá­me­tros title y body. También uti­li­za­mos JSON.stringify para convertir los datos en una cadena. headers se utiliza para es­pe­ci­fi­car el tipo de datos que se enviarán al servidor. En nuestro caso, deben ser datos JSON y se­le­c­cio­na­mos la co­di­fi­ca­ción estándar UTF-8. Ambas claves deben definirse para una petición POST. Para nuestro ejemplo anterior, el código co­rre­s­po­n­die­n­te 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));

Ac­tua­li­zar objetos con PUT o PATCH

Un objeto puede ac­tua­li­zar­se co­m­ple­ta­me­n­te 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 es­pe­ci­fi­ca­mos 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 al­te­r­na­ti­va.

Eliminar objetos con DELETE

Si quieres utilizar fetch para eliminar un objeto, puedes utilizar una solicitud DELETE. Si es necesario, también puedes im­ple­me­n­tar 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); 
});