Promesas, async/await y fetch en JavaScript

Promesas, async/await y fetch en JavaScript: 15 ejemplos ejecutables | We.Inc

Promesas, async/await y la API fetch con una línea de tiempo del event loop paso a paso y 15 ejemplos que puedes editar y ejecutar: JSON, formularios, errores, peticiones en paralelo, AbortController y reintentos.

Promesas, async/await y fetch en JavaScript

Una promesa representa un resultado que llega más tarde. Las funciones async devuelven promesas, y await pausa esa función hasta que una se resuelve. fetch(url) devuelve una promesa de un Response: comprueba response.ok y luego haz await response.json(). Envuelve los await en try y catch, usa Promise.all para peticiones en paralelo y AbortController para cancelar.

El patrón que necesitan la mayoría de las páginas

Paso
Código

Petición
const res = await fetch(url)

Comprobar el estado
if (!res.ok) throw new Error(res.status)

Leer el cuerpo
const data = await res.json()

Gestionar el fallo
try { ... } catch (err) { ... }

Empieza por la línea de tiempo para ver por qué el código que va después de un await puede ejecutarse antes que él. Luego edita cualquier ejemplo y se vuelve a ejecutar al momento. Aquí las peticiones usan URL data: o servidores simulados, así que nada sale de tu navegador.

Avanza paso a paso por la línea de tiempo para ver la pila de llamadas y las dos colas.
Ejecuta el ejemplo 1 y predice el orden antes de mirar.
Repasa fetch, los errores y la comprobación del estado en los ejemplos 5 a 8.
Compara los tiempos en secuencia y en paralelo en el ejemplo 9.
Copia las funciones de cancelar, tiempo de espera y reintento en tu propio código.

Nunca dejes una promesa sin un catch en algún punto de la cadena; los rechazos no gestionados ocultan bugs reales.
Inicia las peticiones independientes antes de esperar a ninguna, y luego haz await de Promise.all.
Comprueba res.ok en cada fetch. Una página 404 interpretada como JSON lanza un error de sintaxis confuso.
Evita await dentro de forEach; no espera. Usa for...of para ir en secuencia o map con Promise.all para ir en paralelo.
Cancela las peticiones en la limpieza de los efectos de React para que una respuesta lenta no pueda actualizar un componente que ya no existe.

Preguntas frecuentes

¿Qué diferencia hay entre promesas y async/await?

Ninguna en lo que pueden hacer: async/await está construido sobre las promesas. Una función async siempre devuelve una promesa, y await desenvuelve una. Se lee como código normal paso a paso, lo que facilita gestionar los errores con try y catch.

¿Por qué fetch no lanza un error con un 404?

fetch trata cualquier respuesta HTTP como una petición correcta, porque el servidor sí respondió. Solo rechaza ante fallos de red o una petición cancelada. Comprueba tú mismo response.ok o response.status.

¿Por qué setTimeout con 0 se ejecuta después de una promesa resuelta?

Los callbacks de las promesas van a la cola de microtareas, que se vacía por completo después del script actual. Un callback de temporizador es una tarea, que espera a la siguiente vuelta del event loop.

¿Cómo cancelo una petición fetch?

Crea un AbortController, pasa controller.signal en las opciones de fetch y ejecuta controller.abort(). La promesa de fetch se rechaza con un error llamado AbortError.

¿Puedo usar await en el nivel superior?

Sí, dentro de módulos JavaScript (script type="module" o cualquier módulo ES empaquetado). En los scripts clásicos, envuelve el código en una función async.

Errores que verás

"Unexpected token < in JSON" significa que el servidor envió HTML, normalmente una página de error, y .json() intentó interpretarlo. Comprueba antes res.ok y el Content-Type.
"Failed to fetch" o un TypeError es un fallo de red o de CORS. El navegador oculta los detalles a propósito; abre la pestaña Network para ver si la petición se bloqueó.
Una petición que funciona en una herramienta pero no en el navegador suele carecer de cabeceras CORS en el servidor. Eso hay que corregirlo en el servidor, no en fetch.

Usarlo en un sitio real

Un formulario de contacto envía su FormData a un endpoint de formularios, muestra un estado de envío y cambia a un mensaje de agradecimiento solo cuando res.ok es true. Mantén el formulario HTML simple funcionando sin JavaScript como respaldo.
En las páginas que leen datos al cargar, muestra un esqueleto o un mensaje breve mientras esperas, y un error con un botón de reintentar si falla, en lugar de una caja vacía.

Promesas y async/await

1. Qué se ejecuta y cuándo

Primero se ejecutan las líneas síncronas, luego cada callback de promesa en cola (microtareas) y después el temporizador (una tarea). Cambia el orden y vuelve a ejecutarlo.

2. Crear una promesa

Una promesa se resuelve una sola vez: resolve da un valor, reject da un error. then y catch se ejecutan más tarde, nunca al instante.

3. Lo mismo con async y await

await pausa solo la función async en la que está. La línea que va después de la llamada a main() se ejecuta antes de que main termine.

4. Errores con try, catch y finally

Dentro de una función async, un await rechazado lanza un error, así que try y catch funcionan como siempre. finally es el sitio para ocultar un indicador de carga.

fetch para tareas reales de un sitio web

5. Cargar JSON con fetch

fetch devuelve un Response; .json() lee e interpreta el cuerpo, que es un segundo await. Este usa una URL data: para que funcione sin conexión.

6. Para fetch, un 404 no es un error

fetch solo rechaza cuando la petición no se puede hacer en absoluto (sin conexión, bloqueada, URL incorrecta). Un 404 o un 500 se resuelve con normalidad con ok en false, así que compruébalo siempre.

7. Enviar un formulario con fetch

FormData lee cada campo con nombre. Aquí la petición se construye pero no se envía, y se imprime su cuerpo para que veas exactamente lo que recibiría un servidor.

8. POST con JSON

Envía JSON convirtiéndolo en cadena y definiendo tú mismo la cabecera Content-Type; fetch no hace ninguna de las dos cosas con objetos simples.

Varias peticiones a la vez

Qué función de promesas usar

Función
Se resuelve cuando
Úsala para

Promise.all
Todas se cumplen, o la primera se rechaza
Datos de los que necesitas todas las partes

Promise.allSettled
Todas las promesas se han resuelto
Widgets independientes; informa de cada resultado

Promise.race
La primera se resuelve, sea como sea
Hacer competir un temporizador con una petición

Promise.any
La primera se cumple (solo rechaza si todas rechazan)
Probar mirrors y quedarte con el éxito más rápido

9. En secuencia frente a en paralelo

Esperar una llamada cada vez suma las esperas. Iniciarlas todas y hacer await de Promise.all solo espera lo que tarde la más lenta.

10. Promise.all frente a Promise.allSettled

Promise.all rechaza en cuanto una falla. allSettled espera a todas y te dice cuáles funcionaron, lo que encaja con paneles de widgets independientes.

11. Muchas peticiones, unas pocas cada vez

Lanzar cientos de peticiones a la vez puede activar los límites de tasa. Este pequeño pool mantiene como máximo tres en curso.

Cancelar, tiempo de espera, reintentar

12. Cancelar con AbortController

Pasa controller.signal a fetch y ejecuta abort() para detenerlo. La promesa se rechaza con un AbortError, que normalmente ignoras.

13. Rendirse tras un tiempo de espera

AbortSignal.timeout(ms) crea una señal que se cancela sola. Con fetch, el nombre del error es TimeoutError, así que puedes distinguirlo de una cancelación del usuario.

14. Reintentar con espera creciente

Reintenta solo los errores que pueden pasar, como un tiempo de espera agotado o un 503, y espera más cada vez para que un servidor saturado pueda recuperarse.

15. Buscar mientras escribes, sin resultados obsoletos

Espera a una pausa al escribir y cancela la petición anterior cuando empiece una nueva, para que una respuesta lenta y antigua nunca pueda sobrescribir otra más reciente.

¿Tienes una respuesta que necesitas leer? Pégala en el

formateador de JSON

Todo el script es una tarea. Empieza en la pila de llamadas.
La línea 1 se ejecuta al instante e imprime A.
setTimeout entrega el callback al temporizador. Tras 0 ms espera en la cola de tareas.
La promesa ya está resuelta, así que su callback va directamente a la cola de microtareas.
La línea 4 sigue siendo síncrona, así que D se imprime antes que cualquier cosa en cola.
El script termina y la pila queda vacía. Ahora se ejecutan todas las microtareas antes que cualquier tarea.
Se ejecuta el callback de la promesa e imprime C.
Las microtareas están vacías, así que el event loop toma la siguiente tarea: el temporizador imprime B.

Línea de tiempo del event loop

Pila de llamadas

Microtareas

Cola de tareas

Consola

Paso {i} de {n}.

Atrás

Siguiente paso

Pausa

Reproducir

Reiniciar

Empieza gratis · Sin tarjeta de crédito

Promesas, async/await y fetch en JavaScript