Fetch API en JavaScript: Modernizando las Solicitudes HTTP

Fetch API es una interfaz moderna que permite realizar solicitudes HTTP asíncronas en el navegador. Fue agregada en la especificación de ECMAScript 2015 (ES6) y ofrece una alternativa poderosa y flexible comparado con XMLHttpRequest.

Fetch API

Fetch API proporciona una forma sencilla de obtener recursos de forma asíncrona, para ello se usa función fetch para realizar solicitudes a servidores y obtener respuestas. fetch devuelve una promesa con la respuesta a la solicitud realizada.

La sintaxis básica de la función fetch es:


fetch(url, options)
  .then(response => {
    // Manejo de la respuesta
  })
  .catch(error => {
    // Manejo de errores
  });

Donde se tienen los siguiente parámetros y métodos:

url: La URL del recurso al que se quiere acceder.
options: (opcional) Un objeto con configuraciones adicionales para la solicitud.
then: método que se ejecuta cuando se completa la petición.
catch: método que se ejecuta cuando ocurre un error en la petición

Entre las opciones de la solicitud (options) tenemos:

Opción	Descripción
`method`	Método de la solicitud: `GET`, `POST`, `PUT`, `DELETE`.
`cache`	Define si se usa cache: `no-cache`, `reload`, `force-cache`.
`headers`	Objecto con headers adicionales, ejemplo: `{'Content-Type': 'application/json'}`.
`body`	Cuerpo de la solicitud, puede ser del tipo: `String`, `File`, `FormData`, etc.

Fetch con método GET

Veamos un ejemplo simple de cómo utilizar fetch para realizar una solicitud GET. Para ello usaremos un API de prueba, la respuesta vamos a parsearla como un objeto JSON y el resultado de esta los imprimimos en la consola.


fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
        return response.json();
    })
    .then(data => {
        data.forEach(item => {
            console.log(item);
        })
    })
    .catch(error => {
        console.log('error: ', error);
    });

Fetch con método POST

Ahora veamos un ejemplo enviando datos a un servicio, usamos un objeto adicional para definir: método POST, el body de la solicitud con tres campos (title, body, userId) en un texto en formato JSON y headers indicando el tipo de contenido enviado.


fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify({ title: 'Post Demo', body: 'Description content', userId: 1 }),
        headers: { 'Content-type': 'application/json; charset=UTF-8' }
    })
    .then(response => {
        return response.json()
    })
    .then(json => {
        console.log(json)
    });

Upload de archivos con Fetch

Para subir archivos se usa el método POST, el contenido del archivo se envía usando un objeto FormData. Para ello si tenemos un formulario con un campo llamado file-input el envío sería de la siguiente manera:


const fileInput = document.getElementById('file-input');
const formData = new FormData();
formData.append('file', fileInput.files[0]);

// Enviar el archivo usando Fetch API
fetch('https://yourdomain.com/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('Archivo subido con éxito:', data);
    })
    .catch(error => {
        console.error('Error al subir el archivo:', error);
    });

Manejo de Errores

Fetch solo rechaza una Promesa si hay un problema de red o si la solicitud es bloqueada. Si el servidor responde con un código de error (404, 500, etc.) la Promesa se resuelve exitosamente, por lo que se requiere verificar el estado de la respuesta:


fetch('https://jsonplaceholder.typicode.com/posts/112')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network error ' + response.statusText);
        }
        return response.json();
    })
    .then(data => {
        data.forEach(item => {
            console.log(item);
        })
    })
    .catch(error => {
        console.log('error: ', error);
    });

Fetch con Autenticación

Otra forma de acceder a Servicios es usando autenticación, para ello enviaremos las credenciales (token) usando los headers.


const token = 'your-bearer-token';

fetch('https://yourdomain.com/posts', {
        method: 'POST',
        body: JSON.stringify({ title: 'Post Demo', body: 'Description content', userId: 1 }),
        headers: { 
            'Content-type': 'application/json; charset=UTF-8',
            'Authorization': 'Bearer ${token}'
       }
    })
    .then(response => {
        return response.json()
    })
    .then(json => {
        console.log(json)
    });

Conclusión

Fetch API es una herramienta que permite realizar solicitudes HTTP en JavaScript. El uso de Promesas facilita el manejo asíncrono y permite escribir código más limpio y mantenible.