API fetch: intercambio de datos con el servidor

Al finalizar este tema

Conocerás el patrón básico para enviar solicitudes al servidor mediante fetch y procesar las respuestas.

¿Qué es fetch?

fetch es una función integrada en el navegador para realizar solicitudes HTTP. Se utiliza para solicitar o enviar datos al servidor. Dado que devuelve una promesa, se usa junto con async/await.

const response = await fetch("/api/users");
const data = await response.json();
console.log(data);

Son tres pasos: enviar la solicitud, recibir la respuesta y analizar los datos.

Solicitud GET

Se utiliza para obtener datos. Dado que GET es el valor predeterminado, no es necesario especificarlo explícitamente:

const res = await fetch("/api/users");
const users = await res.json();

Si se necesitan parámetros de consulta, se añaden a la URL:

const res = await fetch("/api/users?page=2&limit=10");

Solicitud POST

Se utiliza para enviar datos:

const res = await fetch("/api/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name: "Alice",
    email: "alice@example.com",
  }),
});

const created = await res.json();

method, headers y body se pasan como segundo argumento. En el cuerpo se incluye la cadena convertida con JSON.stringify.

Comprobación del estado de la respuesta

fetch no genera errores, incluso en caso de errores HTTP (404, 500). Solo genera errores cuando falla la conexión de red.

const res = await fetch("/api/users/999");
console.log(res.status); // 404
console.log(res.ok);     // false (status fuera del rango 200-299)

Por lo tanto, es necesario verificarlo manualmente:

const res = await fetch("/api/users");
if (!res.ok) {
  throw new Error(`HTTP error: ${res.status}`);
}
const data = await res.json();

Patrones de gestión de errores

async function fetchUsers() {
  try {
    const res = await fetch("/api/users");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (error) {
    if (error instanceof TypeError) {
      console.log("Fallo de conexión de red");
    } else {
      console.log("Solicitud fallida:", error.message);
    }
    return [];
  }
}

TypeError ocurre cuando la red en sí no funciona (el servidor está inactivo o desconectado).

Formato de los datos de respuesta

const json = await res.json();   // JSON → objeto
const text = await res.text();   // texto
const blob = await res.blob();   // binario (imágenes, etc.)

Solo se puede llamar a una de las funciones: .json(), .text() o .blob(). Una vez leído, el cuerpo de la respuesta no se puede volver a leer.

Aspectos clave

fetch es la función integrada en el navegador para realizar solicitudes HTTP y devuelve una promesa. No genera automáticamente un error en caso de errores HTTP (404, 500), por lo que se debe verificar res.ok. GET se utiliza para obtener datos y POST para enviarlos.