Conceptos Básicos: ¿Por qué necesitamos Fetch?

La API Fetch es una herramienta moderna para solicitudes de red proporcionada por el navegador, diseñada para reempalzar el Ajax tradicional (XMLHttpRequest). Sus características principales son:

• Basada en Promesas → Código más limpio y legible (elimina los callbacks anidados).
• Soporte para Streams → Permite procesar archivos grandes por fragmentos sin bloquear la página.
• Configuración flexible → Personaliazción sencilla de cabeceras, métodos HTTP y cuerpos de solicitud.

Ejemplo 1: Enviar una solicitud GET simple

// Solicitar y procesar datos JSON
fetch('https://api.ejemplo.com/info')
  .then(respuesta => respuesta.json()) // Analiza como JSON → devuelve una nueva Promesa
  .then(informacion => console.log('Datos recibidos:', informacion))
  .catch(error => console.error('Error en la solicitud:', error));

Configuración de Solicitudes: POST y Parámetros Personalizados

Se utiliza el segundo parámetro de fetch() para pasar un objeto de configuración con el método, cabeceras, cuerpo, etc.

Ejemplo 2: Enviar una solicitud POST con datos JSON

const datosUsuario = { nombre: 'Carlos', edad: 35 };

fetch('https://api.ejemplo.com/usuarios', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // Indica al servidor que se envía JSON
  },
  body: JSON.stringify(datosUsuario) // Convierte el objeto a cadena JSON
})
  .then(respuesta => respuesta.text())
  .then(texto => console.log('Respuesta del servidor:', texto));

Manejo de Diferentes Tipos de Respuesta

El objeto Resposne devuelto por Fetch proporciona varios métodos para analizar el cuerpo de la respuesta:

• .json() → Analiza el cuerpo como un objeto JSON.
• .text() → Analiza el cuerpo como texto plano.
• .blob() → Analiza el cuerpo como datos binarios (ej. una imagen).

Ejemplo 3: Descargar y mostrar una imagen

fetch('https://ejemplo.com/foto.png')
  .then(respuesta => respuesta.blob())
  .then(imagenBlob => {
    const elementoImg = document.createElement('img');
    elementoImg.src = URL.createObjectURL(imagenBlob);
    document.body.appendChild(elementoImg);
  });

Manejo de Errores: Error de Red ≠ Error HTTP

Es necesario realizar un manejo de errores en dos pasos:

1. Error de red (ej. sin conexión) → .catch() se activa automáticamente.
2. Error HTTP (ej. 404, 500) → Se debe verificar manualmente el estado de la respuesta.

Ejemplo 4: Manejo completo de errores

fetch('https://api.ejemplo.com/recurso-inexistente')
  .then(respuesta => {
    if (!respuesta.ok) { // Verifica si el código HTTP es exitoso (200-299)
      throw new Error(`Error HTTP! Código: ${respuesta.status}`);
    }
    return respuesta.json();
  })
  .then(datos => console.log(datos))
  .catch(error => console.error('Error:', error)); // Captura cualquier error

Configuración de Solicitudes entre Orígenes (CORS)

El navegador bloquea las solicitudes entre diferentes orígenes por defecto. Es necesario configurar el servidor para permitirlo o ajustar el modo de la solicitud:

// Solicitud entre orígenes (requiere soporte del servidor)
fetch('https://api.otro-dominio.com/info', {
  mode: 'cors', // Valor por defecto, también puede ser 'no-cors', etc.
  headers: {
    'Authorization': 'Bearer tokenSuperSecreto' // Token de autenticación
  }
});

Uso Avanzado: Subida de Archivos

Ejemplo 5: Subir un archivo usando FormData

<input type="file" id="inputArchivo">

const inputArchivo = document.querySelector('#inputArchivo');
const datosFormulario = new FormData();
datosFormulario.append('archivo', inputArchivo.files[0]); // Agrega el archivo

fetch('https://api.ejemplo.com/subir', {
  method: 'POST',
  body: datosFormulario // Fetch establece automáticamente el Content-Type adecuado
})
  .then(respuesta => respuesta.json())
  .then(resultado => console.log('Archivo subido correctamente:', resultado));

Comparación con el Ajax Tradicional (XMLHttpRequest)

¿Por qué se recomienda Fetch?

1. Código más limpio → No es necesario gestionar múltiples eventos (onload/onerror).
2. Encadenamiento de Promesas → Mayor facilidad de mantenimiento y legibilidad.
3. Procesamiento automático → Facilita tareas comunes como analizar JSON o manejar Blobs.