Proyecto: muestra datos obtenidos de una API

La idea clave

Una aplicación que consulta datos debe mostrar que está trabajando y comunicar los errores. Aquí verás una demo controlada que simula fallos para poder probarlos; la lección de fetch anterior ya usó una petición real.

Ejemplo paso a paso

Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.

async function cargar() {
  const url = 'data:application/json,%5B%7B%22id%22%3A1%7D%5D';
  const respuesta = await fetch(url);
  const datos = await respuesta.json();
  console.log(datos.length);
}
cargar();

1. fetch solicita datos JSON desde una URL data: reproducible.
2. await espera el resultado y respuesta.json lee el cuerpo.
3. El proyecto descargable desarrolla los estados de carga, resultado, error y cancelación simulados claramente.

Practica con código

Antes de empezar, piensa: ¿La demo depende de una clave privada de una API?

Abre el explorador de datos, pulsa Cargar, luego Simular fallo y finalmente Cancelar durante una carga.