Fetch en JavaScript: consumir una API con async y await

Fetch en JavaScript permite solicitar recursos mediante HTTP y trabajar con su respuesta. Para consumir una API que devuelve JSON, puedes usar async y await, comprobar el estado HTTP y después leer el cuerpo con response.json().

Fetch no convierte automáticamente cualquier error HTTP en una excepción. Una respuesta 404 puede resolver la promesa: debes comprobar response.ok.

Ejemplo completo sin depender de una API externa

Crea un archivo productos.json junto al HTML con este contenido:

[
  { "nombre": "Cuaderno", "precio": 8 },
  { "nombre": "Lápiz", "precio": 2 }
]

Después añade este bloque a tu página y ejecútala desde un servidor local, no abriendo simplemente el archivo con file://:

<button type="button" id="cargar">Cargar productos</button>
<p id="estado" role="status"></p>
<ul id="productos"></ul>
<script>
  const boton = document.querySelector("#cargar");
  const estado = document.querySelector("#estado");
  const lista = document.querySelector("#productos");

  boton.addEventListener("click", async () => {
    boton.disabled = true;
    estado.textContent = "Cargando...";
    lista.replaceChildren();
    try {
      const respuesta = await fetch("./productos.json");
      if (!respuesta.ok) throw new Error("HTTP " + respuesta.status);
      const datos = await respuesta.json();
      if (!Array.isArray(datos) || !datos.every(item =>
        item !== null && typeof item === "object" &&
        typeof item.nombre === "string" &&
        Number.isFinite(item.precio))) {
        throw new Error("Formato de productos inesperado");
      }
      for (const producto of datos) {
        const li = document.createElement("li");
        li.textContent = producto.nombre + ": " + producto.precio;
        lista.append(li);
      }
      estado.textContent = datos.length ? "Productos cargados." : "No hay productos.";
    } catch (error) {
      estado.textContent = "No se pudieron cargar los productos.";
      console.error(error);
    } finally {
      boton.disabled = false;
    }
  });
</script>

La información recibida se inserta con textContent. No la conviertas directamente en HTML con innerHTML si no has resuelto la validación y el tratamiento de contenido no fiable.

Por qué hay dos await

El primero espera la respuesta disponible de fetch. El segundo espera la lectura y conversión del cuerpo a JSON. Tener una Response no significa que ya tengas el objeto con los datos.

Await pausa la continuación de esa función, no convierte toda la aplicación en un proceso bloqueado. Una función async devuelve una promesa.

Cómo sustituir el archivo por una API

Cambia la URL por el endpoint documentado de tu servicio y adapta la validación a su estructura. Si requiere autenticación, no incrustes una clave secreta de servidor en JavaScript del navegador: el código y las peticiones son inspeccionables.

Qué hacer con los errores de CORS

El servidor de destino debe permitir el acceso desde tu origen cuando corresponda. No se arregla quitando la comprobación de errores ni usando mode no-cors para intentar leer JSON: una respuesta opaca no expone su cuerpo de esa forma.

Revisa la consola y Red para distinguir CORS, problemas de red, errores HTTP y JSON inválido. Cada causa requiere una solución distinta.

Errores frecuentes

• Leer datos antes de que se resuelva la promesa.
• Suponer que cualquier respuesta correcta contiene la estructura esperada.
• No restablecer el estado del botón cuando falla la petición.
• Mezclar contenido HTTP con una página HTTPS.

Preguntas frecuentes

¿Fetch solo permite GET?

No. Admite opciones para otros métodos, cabeceras y cuerpos. Debes respetar el contrato y los permisos del servidor.

¿Una petición POST guarda datos por sí sola?

No. El servidor debe implementar esa operación y devolver el resultado apropiado.

Para entender los elementos que actualiza el ejemplo, consulta la guía del DOM.

Referencia técnica: documentación de MDN.