Desarrollo Frontend · FRO-106

Consumo de APIs desde el frontend

fetch, promesas, estados de carga y error, y qué hacer cuando la API de terceros se cae.

Bajo demanda Intermedio 6 módulos · 30 clases

Formato asíncrono Desarrollo JavaScript

DESARROLLO

Lo que aprenderás

Realizar peticiones GET, POST y DELETE con fetch controlando cabeceras y cuerpo JSON.
Encadenar operaciones asíncronas con async y await y capturar errores con try y catch.
Representar en la interfaz los estados de carga, vacío, error y éxito de cada petición.
Cancelar peticiones obsoletas con AbortController al cambiar de vista o de búsqueda.
Diagnosticar fallos de CORS leyendo la respuesta preliminar en el panel de red.
Aplicar reintentos con espera creciente y tiempos límite para dependencias inestables.
Guardar y renovar credenciales de acceso sin exponerlas en el código del cliente.

Contenido del curso

6 módulos · 30 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Bases asíncronas 5 clases

Por qué el navegador no puede esperar bloqueado
Callbacks, promesas y su encadenamiento
async y await con ejemplos comparados
Errores asíncronos y try con catch
Panel de red como herramienta principal

Módulo 2 · Peticiones con fetch 5 clases

GET y lectura de una respuesta JSON
Cabeceras, tipos de contenido y cuerpo
POST, PUT y DELETE sobre una API real
Códigos de estado y qué hacer con cada familia
Parámetros de consulta y construcción de URL

Módulo 3 · Estados en la interfaz 5 clases

Modelar carga, vacío, error y éxito
Indicadores de carga que no molestan
Mensajes de error útiles para el usuario
Reintento manual y recuperación
Accesibilidad de los cambios dinámicos

Módulo 4 · Cuando la red se complica 5 clases

Tiempos límite y peticiones que nunca vuelven
AbortController y cancelación de peticiones obsoletas
Reintentos con espera creciente
Peticiones en paralelo y control de concurrencia
Caché en el cliente y datos obsoletos

Módulo 5 · Seguridad y acceso 5 clases

CORS explicado desde la respuesta preliminar
Autenticación con token y su renovación
Qué nunca debe vivir en el código del cliente
Cookies, SameSite y sesiones
Límites de uso y respuesta al código de exceso de peticiones

Módulo 6 · Proyecto de cierre 5 clases

Enunciado: buscador con datos de una API pública
Capa de acceso a datos reutilizable
Búsqueda con cancelación y retardo
Simular caídas y comprobar el comportamiento
Registro de errores útil para soporte

Requisitos

JavaScript a nivel de funciones, arrays, objetos y manipulación del DOM.
Conocimiento básico de HTTP: métodos, códigos de estado y cabeceras.
Manejo de las herramientas de desarrollo del navegador, en especial el panel de red.

Descripción

En cuanto una interfaz depende de datos externos aparecen los problemas que no se ven en local: la respuesta tarda, la red falla a mitad, el servicio de terceros devuelve un error inesperado o simplemente deja de responder. Si la interfaz no contempla esos estados, el usuario ve una pantalla en blanco y el equipo recibe una incidencia sin información útil.

El curso trabaja el ciclo completo de una petición desde el frontend. Se practican fetch y async con una API real, se modelan los cuatro estados de cada vista, se cancelan peticiones que ya no interesan y se implementan reintentos con espera creciente y tiempos límite. Los errores se provocan a propósito, incluidos los de CORS, para aprender a leerlos en el panel de red.

El resultado es una interfaz que se comporta con dignidad cuando algo falla y que da información suficiente para diagnosticar el problema. Estas prácticas se aplican después igual en React, Vue o Svelte, y son requisito para los cursos de aplicaciones instalables sin conexión y de pruebas de extremo a extremo.

¿Para quién es este curso?

Desarrolladores frontend que integran servicios externos y sufren caídas de terceros.
Perfiles que construyen paneles internos alimentados por APIs de la propia organización.
Programadores que van a dar el salto a un marco de trabajo y necesitan asentar el modelo asíncrono.