Promesas, async/await y peticiones con fetch

Promesas y funciones async

Una promesa puede estar pendiente, cumplida o rechazada. Una función async devuelve una promesa. await permite esperar su resultado dentro de esa función: suspende su ejecución, pero no bloquea por sí mismo todo el navegador. El trabajo pesado de cálculo sigue necesitando atención al rendimiento.

Comprobar el estado HTTP

fetch devuelve una promesa de Response. Una respuesta 404 o 500 no hace que fetch rechace automáticamente la promesa. response.ok indica si el estado está entre 200 y 299. Leer el cuerpo con response.json() es otra operación asíncrona y puede fallar si el contenido no es JSON válido.

Ejemplo con un archivo local

Crea un archivo datos.json con el contenido indicado y sirve ambos archivos desde el mismo servidor HTTP local. No abras la página con file://. El ejemplo espera JSON; no es adecuado para una respuesta 204 sin cuerpo.

// datos.json: {"mensaje":"Biblioteca lista"}
async function cargarMensaje() {
  const respuesta = await fetch("./datos.json");
  if (!respuesta.ok) {
    throw new Error("HTTP " + respuesta.status);
  }
  return respuesta.json();
}
cargarMensaje()
  .then((datos) => console.log(datos.mensaje))
  .catch((error) => console.error("No se pudo cargar:", error));

Peticiones a otro origen

El navegador aplica CORS cuando una petición cruza orígenes. El servidor de destino debe permitir el acceso correspondiente. mode: "no-cors" no permite leer libremente la respuesta: produce una respuesta opaca. Antes de cambiar el cliente, comprueba la documentación y la configuración del servidor.

Comprobar éxito y fallo

1. Carga el archivo válido y comprueba el mensaje.
2. Cambia la ruta para provocar un 404 y verifica que se informa el error.
3. Introduce JSON inválido y observa que también se captura el fallo de lectura.
4. En una interfaz real, muestra estados de carga, éxito y error que el usuario pueda entender.