Introducción a Fetch

• Fetch es un mecanismo moderno para realizar peticiones HTTP asíncronas en JavaScript.
  
• Surgió como alternativa a XMLHttpRequest (XHR), ofreciendo una sintaxis más legible y basada en promesas.

Realizando Peticiones con fetch()

• La forma básica de usar Fetch es llamar a la función fetch() con la URL del recurso:

  fetch("/ruta/del/recurso")
    .then(response => {
      // Procesa la respuesta
    })
    .catch(error => {
      console.error("Error de red:", error);
    });

• La función fetch() devuelve una promesa que se resuelve cuando se recibe la respuesta y se rechaza solo por errores de red.

El Objeto response

• En el primer .then(), se recibe un objeto response que representa la respuesta del servidor.
  
• Algunas propiedades importantes son:
  • response.status: Código de estado HTTP (por ejemplo, 200, 404, 500).
  • response.statusText: Texto descriptivo del código de estado.
  • response.ok: Booleano que es true si el código está en el rango 2xx, de lo contrario false.
  • response.headers: Cabeceras HTTP.
  • response.url: URL completa del recurso solicitado.

Procesando los Datos de la Respuesta

El objeto response dispone de métodos para transformar la respuesta en diferentes formatos, cada uno devolviendo una promesa:

• .text(): Devuelve el contenido como texto plano.
• .json(): Interpreta el contenido como JSON y devuelve un objeto. Es equivalente a aplicar JSON.parse() al resultado de .text().
• .blob(): Devuelve un objeto Blob (útil para archivos).
• .arrayBuffer(): Devuelve un objeto ArrayBuffer (datos binarios).
• .formData(): Devuelve datos en formato FormData.

Ejemplo de procesamiento JSON:

fetch("/datos.json")
  .then(response => {
    if (!response.ok) { 
      throw new Error("Error HTTP: " + response.status); 
    }
    return response.json();
  })
  .then(data => {
    console.log("Datos recibidos:", data);
  })
  .catch(error => {
    console.error("Error en la petición:", error);
  });

Opciones de Petición (options)

La función fetch() puede recibir un segundo parámetro, un objeto de opciones, para configurar la petición:

• method: Método HTTP (por defecto es GET). Ejemplos: POST, PUT, DELETE, etc.

• headers: Cabeceras HTTP a enviar.
  Ejemplo utilizando un objeto simple:

  headers: {
    "Content-Type": "application/json"
  }

  O utilizando el objeto Headers:

  const headers = new Headers();
  headers.set("Content-Type", "application/json");

• body: Cuerpo de la petición. Frecuentemente se usa JSON.stringify() para enviar datos JSON.

• credentials: Define si se envían credenciales (cookies, etc.). Valores: "omit", "same-origin" o "include".

Ejemplo completo:

fetch("/api/usuario", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ nombre: "Juan", edad: 30 }),
  credentials: "same-origin"
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

Manejo de Errores y Flujo de Promesas

• La promesa devuelta por fetch() se rechaza solo por errores de red.
  

• Los errores HTTP (404, 500, etc.) no rechazan la promesa; deberás comprobar manualmente la propiedad response.ok y lanzar un error si es false:

  fetch("/ruta")
    .then(response => {
      if (!response.ok) {
        throw new Error("Error HTTP: " + response.status);
      }
      return response.json();
    })
    .catch(error => console.error("Error en la petición:", error));

Consumiendo Promesas con async/await

La sintaxis async/await simplifica la lectura y escritura del código asíncrono:

async function obtenerDatos() {
  try {
    const response = await fetch("/api/usuario");
    if (!response.ok) {
      throw new Error("Error HTTP: " + response.status);
    }
    const data = await response.json();
    console.log("Datos:", data);
  } catch (error) {
    console.error("Error en la petición:", error);
  }
}

obtenerDatos();

• await hace que la función espere a que la promesa se resuelva.
  
• La palabra clave async se usa para definir funciones que pueden contener await.

Consideraciones Adicionales

• CORS (Cross-Origin Resource Sharing):
  Al hacer peticiones a dominios distintos del origen, asegúrate de que el servidor permita las solicitudes a través de cabeceras CORS apropiadas.
• La API Fetch, junto con promesas o async/await, hace el código de comunicación asíncrona mucho más sencillo y legible en comparación con XMLHttpRequest.