APIs desde el navegador
Cargar, esperar, fallar y reintentar: la interfaz que habla con un servidor.
13 aulas · 7 horas de práctica · en el navegador, sin instalar nada
Temario
- fetch y el estado de carga — Pedir datos a un servidor es asíncrono: entre el click y la respuesta, la pantalla tiene que mostrar algo.
- Los tres estados: cargando, ok, error — Toda pantalla que pide datos tiene tres caras. Faltar una es dejar al usuario sin saber qué pasó.
- Listas con keys — Renderizar lo que llega de una API en una lista, con la key que React necesita para no confundirse.
- Taller — El pronóstico — Un pronóstico por ciudad: lista, estado de carga, los tres estados y una lista con key, en cuatro fases.
- Paginación — Pedir de a páginas, refetchear cuando la página cambia, y no dejar apretar un botón que no tiene a dónde ir.
- Búsqueda con debounce — Esperar a que la persona termine de escribir antes de pedir nada: un pedido por búsqueda, no uno por letra.
- POST y validación — Mandar datos con el método correcto, y validar antes de gastar un pedido que el servidor va a rechazar igual.
- Caché y revalidar — No pedir dos veces lo mismo: guardar lo que ya llegó, y usarlo antes de volver a pedirlo.
- Taller — El buscador de películas — Un buscador con debounce, paginación y caché, sobre un catálogo fijo de películas.
- Optimistic UI — Mostrar el cambio antes de que el servidor confirme, y deshacerlo si al final no salió bien.
- Autenticación con token y 401 — Mandar la identidad en cada pedido, y qué hacer específicamente cuando el servidor dice que ya no vale.
- Polling con limpieza — Preguntarle al servidor cada tanto si algo cambió, y apagar el reloj cuando ya no hace falta.
- Taller — El tablero en vivo — Un marcador que se actualiza solo con polling, y un botón que suma con optimistic UI, en tres fases.