Consumo de API REST en mobile: latencia, errores y robustez

Implementa consumo de API con arquitectura mantenible, manejo de errores por capa y control de latencia para apps móviles reales.

¿Cuánto sabes de Desarrollo de Apps?

📘 Teoría

Contratos de API y modelos de dominio

Tu UI no debería depender del JSON crudo del backend.

Define DTOs de red y conviértelos a modelos de dominio para desacoplar cambios de backend de la capa de presentación.

Versiona endpoints y campos críticos para evitar roturas silenciosas tras despliegues parciales.

Centraliza validaciones mínimas (nulos, tipos, defaults) antes de que los datos lleguen al estado de pantalla.

DTO para transporte; modelo para negocio.
Transformaciones en repositorio, no en componentes.
Contratos explícitos reducen regresiones.

Errores, timeouts y estrategia de reintento

Un buen cliente de API diferencia fallo temporal de fallo definitivo.

Separa errores de transporte (sin red, timeout), errores HTTP (401, 404, 500) y errores de parsing para reaccionar distinto.

Aplica reintentos solo en errores recuperables y con backoff; reintentar un 401 sin refrescar token solo empeora el problema.

Propaga metadatos útiles (status, código interno, requestId) para observabilidad y debugging posterior.

Cliente HTTP con mapeo básico de errores

type ApiResult<T> = { ok: true; data: T } | { ok: false; kind: 'network' | 'http' | 'parse'; status?: number; message: string };

async function getFeed(): Promise<ApiResult<string[]>> {
  try {
    const response = await fetch('https://api.example.com/v1/feed', { method: 'GET' });
    if (!response.ok) {
      return { ok: false, kind: 'http', status: response.status, message: 'HTTP error' };
    }
    const json = await response.json();
    if (!Array.isArray(json.items)) {
      return { ok: false, kind: 'parse', message: 'Payload inválido' };
    }
    return { ok: true, data: json.items };
  } catch (error) {
    return { ok: false, kind: 'network', message: 'Sin conexión o timeout' };
  }
}

Integración con estado de UI

La red no vive aislada: impacta directamente en loaders, vacíos y errores de pantalla.

Conecta el resultado de API a un estado discriminado (`idle`, `loading`, `success`, `error`) para rendering predecible.

Evita disparar peticiones duplicadas desde múltiples efectos o hooks sin coordinación.

Diseña fallback UX: vista vacía útil, botón de reintento y trazabilidad de error para soporte.

1 Contratos de API y modelos de dominio 2 Errores, timeouts y estrategia de reintento 3 Integración con estado de UI

🧪 Aprende probando

Ejemplo Ejemplo guiado Modela la respuesta de un endpoint de perfil y transforma DTO en modelo de dominio usado por la UI.

⌄

🏁 Retos

Reto Reto práctico Implementa una función `loadProducts` que devuelva éxito o error tipado, diferenciando red y HTTP.

⌄

🧰 Recursos

Enlaces útiles

Android Architecture Guide React Native - Networking Flutter cookbook - Fetch data from the internet MDN - Fetch API Retrofit

Test

Comprueba tus conocimientos con un test sobre Desarrollo de Apps.

Test de Desarrollo de Apps

Recursos del curso 20

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 08

Estado y flujo de datos: de eventos UI a consistencia de pantalla

Lección 10

Autenticación segura en mobile: tokens, sesiones y superficie de ataque

›