Fetch API en JavaScript

La Fetch API es una interfaz moderna y fácil de usar para hacer solicitudes HTTP asincrónicas en JavaScript. Permite realizar peticiones a servidores web de manera sencilla y manejar las respuestas de una forma mucho más clara que el antiguo método basado en `XMLHttpRequest`.

¿Qué es Fetch?

Fetch es una función nativa de JavaScript que proporciona una forma simple de realizar solicitudes HTTP, como obtener datos de una API o enviar datos a un servidor. Este método retorna una promesa, lo que hace que se puedan usar las ventajas de la programación asíncrona, como encadenar operaciones y manejar errores.

Sintaxis Básica de Fetch

La sintaxis básica de `fetch()` es la siguiente:


fetch(url, options)
.then(response => { response.json(); }) // Convierte la respuesta a formato JSON

.then(data => { console.log(data); }) // Trabaja con los datos obtenidos

.catch(error => { console.log(error); }); // Maneja los errores

El método `fetch()` recibe dos parámetros:

url: La URL de la que se quiere obtener o enviar datos.
options: (Opcional) Un objeto que puede contener configuraciones como el método HTTP, los encabezados y el cuerpo de la solicitud.

Realizando una solicitud GET con Fetch

La solicitud GET es la forma más común de obtener datos de un servidor. A continuación te mostramos cómo realizar una solicitud GET utilizando `fetch()`.


fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => { response.json(); }) // Convierte la respuesta en formato JSON

.then(data => { console.log(data); }) // Muestra los datos obtenidos

.catch(error => { console.log(error); }); // Maneja cualquier error

Este ejemplo hace una solicitud GET a la URL `https://jsonplaceholder.typicode.com/posts` (un servicio gratuito de ejemplo) y luego convierte la respuesta en formato JSON antes de mostrarla en la consola.

Realizando una solicitud POST con Fetch

Además de las solicitudes GET, también puedes usar `fetch()` para enviar datos a un servidor mediante una solicitud POST. Aquí te mostramos cómo enviar datos JSON a una API utilizando `fetch()`.


fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        title: 'Nuevo Post',
        body: 'Contenido del nuevo post',
        userId: 1
    })
})

.then(response => response.json()) // Convierte la respuesta en formato JSON
.then(data => console.log(data)) // Muestra los datos obtenidos
.catch(error => console.log(error)); // Maneja cualquier error

En este ejemplo, estamos enviando un objeto JSON con los datos de un nuevo post. Usamos el método `POST` en la opción `method`, y el cuerpo de la solicitud se envía utilizando `body`, que debe ser un string (por eso usamos `JSON.stringify()`).

Manejando Errores con Fetch

Es importante manejar los errores cuando trabajas con Fetch, ya que las solicitudes pueden fallar por varias razones (por ejemplo, si el servidor no responde o si hay problemas de red). Fetch no considera que una respuesta con código de estado HTTP 4xx o 5xx sea un error, por lo que debemos comprobar la respuesta manualmente.


fetch('https://jsonplaceholder.typicode.com/invalid-url')
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => console.log(data))
.catch(error => console.log('There was a problem with the fetch operation:', error));

En este ejemplo, verificamos si la respuesta es correcta mediante `response.ok`. Si la respuesta no es exitosa (por ejemplo, un error 404 o 500), lanzamos un error que se maneja con `catch()`.

Usando Fetch con Async/Await

Para hacer el código más limpio y fácil de leer, puedes usar `async/await` con `fetch()` para manejar las solicitudes de manera más directa. Aquí te mostramos cómo hacerlo:


async function obtenerDatos() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.log('There was a problem with the fetch operation:', error);
    }
}

obtenerDatos();

En este ejemplo, usamos `await` para esperar la resolución de la promesa de `fetch()` y `response.json()` de manera secuencial, y manejamos los errores con un bloque `try/catch`.

Conclusión

La Fetch API es una herramienta poderosa para trabajar con solicitudes HTTP en JavaScript. Es una alternativa moderna y más sencilla a `XMLHttpRequest` y te permite realizar solicitudes de manera asíncrona con un código limpio y estructurado. Usar `async/await` junto con `fetch()` hace que el código sea aún más legible y fácil de manejar, especialmente en aplicaciones que requieren interacciones con APIs.

Anterior Siguiente