{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Retos de integración (2): asincronía, API y estados de interfaz

Resuelve escenarios de frontend real combinando `fetch`, `async/await`, validación HTTP, transformación de datos y render dinámico con control de errores.

Este bloque es un simulador de trabajo real: peticiones remotas, estados de carga, errores inesperados y render en interfaz sin romper experiencia de usuario.

Aquí no basta con que el código funcione una vez; debe mantenerse estable cuando la red falla, el usuario hace click rápido o llega una respuesta tardía.

La meta es entrenar criterio técnico: separar obtención de datos, reglas de negocio y renderizado para depurar más rápido.

Si dominas estos retos, estarás mucho más cerca de resolver tickets de dashboard, listados y widgets con confianza profesional.

  • Un buen resultado visual nace de un flujo bien definido.
  • Cada reto asíncrono debería modelarse como una máquina de estados simple: `idle`, `loading`, `success`, `error`. Si ese esquema no existe, la interfaz acaba mostrando señales contradictorias.
  • Cuando separes explícitamente lectura de eventos, petición de datos y render final, los bugs pasan de misteriosos a diagnosticables.
  • Usa una plantilla estable para no reinventar flujo en cada ejercicio.
  • En retos complejos, la consistencia importa más que la creatividad sintáctica. Una estructura estándar reduce errores de coordinación y acelera entregas.

Marco mental para retos async + UI

Un buen resultado visual nace de un flujo bien definido.

Cada reto asíncrono debería modelarse como una máquina de estados simple: `idle`, `loading`, `success`, `error`. Si ese esquema no existe, la interfaz acaba mostrando señales contradictorias.

Cuando separes explícitamente lectura de eventos, petición de datos y render final, los bugs pasan de misteriosos a diagnosticables.

Patrón operativo reusable para retos con API

Usa una plantilla estable para no reinventar flujo en cada ejercicio.

En retos complejos, la consistencia importa más que la creatividad sintáctica. Una estructura estándar reduce errores de coordinación y acelera entregas.

Aplica siempre la misma secuencia: capturar evento, activar loading, ejecutar petición, validar respuesta, transformar datos, renderizar, cerrar estado.

  • Valida `res.ok` siempre.
  • No mezcles transformaciones con manipulación DOM.
  • Reutiliza `setUiState` y `render` en varios retos.

Clicks rápidos, peticiones viejas y cancelación

Sin control de concurrencia, llega antes el dato incorrecto.

Cuando el usuario dispara varias acciones seguidas, la respuesta antigua puede llegar al final y sobrescribir el estado nuevo. Eso genera una UI aparentemente aleatoria.

Con `AbortController` puedes cancelar la solicitud anterior y asegurar que solo la interacción más reciente tenga derecho a actualizar pantalla.

Render dinámico de tarjetas con datos remotos

Tu lógica no termina en obtener JSON: hay que convertirlo en interfaz clara.

Un error habitual es volcar JSON sin estructura visual. Define primero qué campos necesita la tarjeta y cómo mostrar estados vacíos o incompletos.

Trabajar con funciones de render puras te ayuda a testear resultados sin depender de la petición en sí.

Errores frecuentes en este tipo de retos

Evita los bloqueos más comunes antes de que aparezcan.

Si ves duplicados visuales, revisa limpieza de contenedor previa al render. Si ves `Promise {<pending>}` en pantalla, probablemente olvidaste `await` al parsear.

Diferencia siempre error de red, error HTTP y error de render. Mezclar esos casos hace más difícil depurar y comunicar problema al usuario.

  • No usar `await res.json()` correctamente.
  • No deshabilitar botón durante `loading`.
  • No restaurar estado en `finally`.
  • No mostrar fallback útil cuando falla API.
JavaScript
59

Retos de integración (2): asincronía, API y estados de interfaz

Resuelve escenarios de frontend real combinando `fetch`, `async/await`, validación HTTP, transformación de datos y render dinámico con control de errores.

¿Cuánto sabes de JavaScript?

Código del tema: fetch · async/await · Promise.all · estado UI

📘 Teoría

Marco mental para retos async + UI

Un buen resultado visual nace de un flujo bien definido.

Cada reto asíncrono debería modelarse como una máquina de estados simple: `idle`, `loading`, `success`, `error`. Si ese esquema no existe, la interfaz acaba mostrando señales contradictorias.

Cuando separes explícitamente lectura de eventos, petición de datos y render final, los bugs pasan de misteriosos a diagnosticables.

1

Idle

Estado inicial, sin petición activa.

  • Botón disponible
  • Mensaje neutro
2

Loading

Petición en curso.

  • Deshabilitar acción repetida
  • Feedback visible
3

Success

Datos válidos listos para pintar.

  • Render limpio
  • Traza de control
4

Error

Fallo de red o HTTP.

  • Mensaje entendible
  • UI recuperable

Patrón operativo reusable para retos con API

Usa una plantilla estable para no reinventar flujo en cada ejercicio.

En retos complejos, la consistencia importa más que la creatividad sintáctica. Una estructura estándar reduce errores de coordinación y acelera entregas.

Aplica siempre la misma secuencia: capturar evento, activar loading, ejecutar petición, validar respuesta, transformar datos, renderizar, cerrar estado.

  • Valida `res.ok` siempre.
  • No mezcles transformaciones con manipulación DOM.
  • Reutiliza `setUiState` y `render` en varios retos.
Pipeline base de reto async
async function runFlow() {
  setUiState('loading');

  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);

    const raw = await res.json();
    const model = transform(raw);
    render(model);
    setUiState('success');
  } catch (error) {
    setUiState('error', error.message);
  }
}

Clicks rápidos, peticiones viejas y cancelación

Sin control de concurrencia, llega antes el dato incorrecto.

1

Cuando el usuario dispara varias acciones seguidas, la respuesta antigua puede llegar al final y sobrescribir el estado nuevo. Eso genera una UI aparentemente aleatoria.

2

Con `AbortController` puedes cancelar la solicitud anterior y asegurar que solo la interacción más reciente tenga derecho a actualizar pantalla.

Cancelación preventiva
let controller = null;

async function load(url) {
  if (controller) controller.abort();
  controller = new AbortController();

  const res = await fetch(url, { signal: controller.signal });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

Render dinámico de tarjetas con datos remotos

Tu lógica no termina en obtener JSON: hay que convertirlo en interfaz clara.

1

Un error habitual es volcar JSON sin estructura visual. Define primero qué campos necesita la tarjeta y cómo mostrar estados vacíos o incompletos.

2

Trabajar con funciones de render puras te ayuda a testear resultados sin depender de la petición en sí.

Render de colección
function renderUsers(users, grid) {
  grid.innerHTML = '';

  users.forEach((u) => {
    const card = document.createElement('article');
    card.className = 'card';
    card.innerHTML = `<h3>${u.name}</h3><p>${u.email}</p>`;
    grid.appendChild(card);
  });
}

Errores frecuentes en este tipo de retos

Evita los bloqueos más comunes antes de que aparezcan.

Si ves duplicados visuales, revisa limpieza de contenedor previa al render. Si ves `Promise {}` en pantalla, probablemente olvidaste `await` al parsear.

Diferencia siempre error de red, error HTTP y error de render. Mezclar esos casos hace más difícil depurar y comunicar problema al usuario.

  • No usar `await res.json()` correctamente.
  • No deshabilitar botón durante `loading`.
  • No restaurar estado en `finally`.
  • No mostrar fallback útil cuando falla API.

🧪 Aprende probando

Ejemplo Ejemplo guiado: flujo completo con validación HTTP Carga un TODO remoto, valida estado, transforma salida y registra trazas de control.
⌄
Ejemplo Ejemplo guiado: transformar respuesta para UI Filtra y mapea usuarios remotos a un modelo mínimo de tarjeta para renderizar en dashboard.
⌄
Ejemplo Demo interactiva: endpoint inspector con estado robusto Selecciona endpoint y ejecuta un flujo completo con `loading/success/error`, parseo y render de JSON en vivo.
⌄

🏁 Retos

Reto Reto 1: perrito aleatorio con control de estado completo Implementa botón que carga imagen de Dog API con validación HTTP, render limpio y recuperación ante error.
⌄
Reto Reto 2: dashboard de usuarios con carga paralela y tarjetas Pide users y posts en paralelo, renderiza 3 tarjetas de usuarios y muestra métrica total de posts.
⌄

🧰 Recursos

Enlaces útiles

MDN: Using Fetch API javascript.info: Fetch web.dev: Fetch error handling MDN: Response.ok MDN: AbortController Dog CEO API
Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript
Recursos del curso 62
📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets
‹
Lección 58
Retos de integración (1): pensar, construir y depurar como en trabajo real
Lección 60
Dashboard con consumo de API y filtros
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .