Repasa funciones, eventos y manejo de errores. La sección introduce promesas y solicitudes HTTP paso a paso.
CONTENIDO ORIGINAL
Avanza en orden. Cada lección está redactada para Palta es Cool, utiliza ejemplos propios y termina con una actividad cuya respuesta puedes desplegar.
ANTES DE EMPEZAR
Ubícate antes de avanzar
Al terminar deberías poder relacionar Event loop y promesas con Fetch y HTTP y resolver un caso nuevo.
Reserva entre 75 y 120 minutos o divide el laboratorio en dos sesiones.
04 / PREPARA EL LABORATORIO
Utiliza un navegador con herramientas de desarrollo y una versión LTS de Node.js con npm. Angular y MongoDB se preparan cuando llegues a esos bloques.
Abrir la guía de herramientas →Diagnóstico rápido: ¿cómo se relacionan Event loop y promesas y Fetch y HTTP? ＋
No necesitas acertar todavía. Escribe una hipótesis de dos líneas y compárala con tu respuesta al finalizar; si puedes corregirla y justificar el cambio, hubo aprendizaje.
Aprende el tema paso a paso
Razonarás sobre el bucle de eventos, compondrás promesas y consumirás APIs con cancelación y estados completos.
Al terminar podrás
- Asíncrono no significa ejecutar JavaScript en paralelo
- Una promesa representa un resultado futuro, no el resultado mismo
- Fetch resuelve también ante respuestas HTTP de error
01
Bucle de eventos
Asíncrono no significa ejecutar JavaScript en paralelo
La pila ejecuta una tarea a la vez. El entorno completa temporizadores o E/S y encola callbacks. Las reacciones de promesas usan la cola de microtareas, que se procesa antes de la siguiente tarea. Una función costosa bloquea la interfaz aunque esté dentro de una función async.
await pausa esa función, no todo el proceso.
Las microtareas se vacían antes de renderizar otra tarea.
Divide o delega trabajo intensivo.
¿Por qué setTimeout con cero no ejecuta el callback inmediatamente?
Mostrar respuesta ＋
Solo lo habilita para una tarea futura. La pila actual y las microtareas pendientes deben terminar antes.
02
Promesas
Una promesa representa un resultado futuro, no el resultado mismo
then transforma el valor y catch maneja rechazos; async/await ofrece otra sintaxis sobre promesas. Promise.all falla al primer rechazo y sirve cuando todas son necesarias; allSettled conserva cada resultado; race y any tienen contratos distintos. Las operaciones independientes pueden iniciarse juntas.
Retorna o espera cada promesa que creas.
Captura errores en el límite que puede responder.
Evita await secuencial si las tareas son independientes.
¿Qué ocurre en Promise.all si una promesa rechaza?
Mostrar respuesta ＋
La promesa combinada rechaza con esa causa. Las demás operaciones no se cancelan automáticamente.
03
Fetch y estados
Fetch resuelve también ante respuestas HTTP de error
fetch rechaza por fallos de red o cancelación, pero un 404 o 500 entrega una Response normal; debes comprobar ok o status. La vista debe representar carga, éxito, vacío y error. AbortController cancela trabajo obsoleto, por ejemplo al iniciar una búsqueda nueva.
Comprueba response.ok antes de interpretar éxito.
Valida el JSON recibido: la red no garantiza su forma.
Distingue cancelación de un fallo que debes mostrar.
¿Un fetch con estado 404 entra directamente al catch?
Mostrar respuesta ＋
No. Normalmente resuelve con Response; debes revisar ok o status y lanzar o manejar el resultado según el contrato.
Tu recorrido en tres ideas
- Asíncrono no significa ejecutar JavaScript en paralelo
- Una promesa representa un resultado futuro, no el resultado mismo
- Fetch resuelve también ante respuestas HTTP de error
Construye un explorador de datos remoto
Conecta event loop, promesas, cancelación, HTTP y estados de interfaz en una experiencia resistente a carreras.
CASO
La búsqueda devuelve resultados fuera de orden cuando una respuesta anterior llega después de la consulta actual.
Procedimiento
- Modela carga, éxito, vacío, error y consulta activa.
- Cancela la solicitud anterior y valida estado HTTP y cuerpo.
- Simula latencia, 404, desconexión, JSON inválido y búsquedas rápidas.
Evidencia mínima
- Ninguna respuesta obsoleta cambia la vista.
- Mensajes distintos para cancelación y fallo.
- Pruebas o registro reproducible de cada estado.
Mostrar razonamiento modelo ＋
Cada búsqueda crea un AbortController y conserva su identidad. La nueva cancela la anterior; solo la operación vigente puede publicar resultado. Fetch comprueba ok y el dato se valida antes de renderizar.
Para ir más lejos¿Cómo añadirías caché con expiración sin mostrar datos obsoletos como actuales?
CIERRE DE LA SECCIÓN
Comprueba que puedes usarlo
Antes de continuar, revisa estos tropiezos frecuentes y resuelve un caso sin copiar los ejemplos.
Esperar que fetch rechace automáticamente un estado HTTP 404 o 500.
Ejecutar solicitudes independientes de forma secuencial sin necesidad.
Ahora hazlo sin guía
Construye un explorador de API con búsqueda cancelable, carga, vacío, error, reintento y prevención de respuestas obsoletas.
Mostrar pauta de corrección ＋
Una respuesta sólida:
- Comprueba response.ok y valida datos.
- Cancela la consulta anterior.
- Distingue cancelación, red y error HTTP.