Ir al contenido
wannacode

async no es un hilo

En resumen: async y await en JavaScript se ejecutan en un hilo con un bucle de eventos: await suelta el hilo mientras espera, así que una carrera entre dos esperas es posible incluso sin hilos.

Problema

La última unidad, vendida dos veces

Las rebajas van a todo gas. Queda un par de auriculares. checkout comprueba las existencias, espera a que el banco confirme el pago y solo entonces reduce las existencias. Dos clientes pulsan «Comprar» en el mismo momento:

// El banco confirma el pago en 100 ms.
async function pay(buyer) {
  await sleep(100);
}


let stock = 1;
let sold = 0;


async function checkout(buyer) {
  const left = stock;
  if (left === 0) return;
  await pay(buyer);
  stock = left - 1;
  sold++;
}


await Promise.all([checkout("Ana"), checkout("Beto")]);
console.log(`Vendidos: ${sold}, existencias: ${stock}`);
Salida
Vendidos: 2, existencias: 0

Se venden dos, y hay una unidad. Un cliente recibirá un correo «Tu pedido ha sido enviado» por unos auriculares que no existen.

En JavaScript esto parece imposible: el código se ejecuta en un hilo. En la lección Condición de carrera dos hilos chocaron en count++. Aquí no hay un segundo hilo.

La salida es la misma en cada ejecución: no es mala suerte, es el orden en que se ejecuta el código. Para verlo, hay que saber qué hace await.

La idea

Un hilo y muchas esperas

La mayor parte del trabajo en una tienda en línea es trabajo que espera (mira trabajo que espera y trabajo que calcula): el pago espera al banco, el correo espera al servidor de correo, las existencias esperan al almacén. Un hilo que se queda sentado esperando es un hilo desperdiciado.

Un bucle de eventos es un hilo y una cola de trozos de código que están listos. El hilo toma el siguiente trozo y lo ejecuta hasta el final. Cuando el código llega a una espera, no retiene el hilo: dice «despiértame cuando responda el banco» y lo suelta. El hilo toma el siguiente trozo listo. Cuando el banco responde, el resto de la función (la continuación) entra en la cola y espera su turno.

En Node el bucle de eventos viene incluido. await es justo ese lugar: la función se detiene, el hilo queda libre, y la continuación entrará en la cola cuando la promesa esté lista. Los temporizadores, la red y los archivos esperan fuera de tu JavaScript.

Tres peticiones a tres servicios, lanzadas a la vez:

let waiting = 0;
let most = 0;


async function call(name, ms) {
  waiting++;
  most = Math.max(most, waiting);
  await sleep(ms);
  waiting--;
  console.log(`${name}: listo tras ${ms} ms`);
}


await Promise.all([
  call("pago", 300),
  call("correo", 100),
  call("almacén", 200),
]);
console.log(`Esperaron a la vez: ${most}`);
Salida
correo: listo tras 100 ms
almacén: listo tras 200 ms
pago: listo tras 300 ms
Esperaron a la vez: 3
Cada call se ejecuta hasta await sleep(ms) y devuelve una promesa. Promise.all espera a las tres.

«Esperaron a la vez: 3»: las tres peticiones esperan al mismo tiempo, y solo hay un hilo. Todo tarda unos 300 ms (la más larga), no 600 (la suma). El hilo no esperó a ninguna de ellas.

Pruébalo

Cuántas esperan a la vez

El mismo call, pero la primera petición se espera sola:

¿Qué imprimirá el programa?

await call("pago", 300);
await Promise.all([call("correo", 100), call("almacén", 200)]);
console.log(`Esperaron a la vez: ${most}`);
Respuesta

Míralo

Una carrera entre dos awaits

Volvamos a la última unidad. Así se entrelazan los dos pedidos:

let stock = 1;
let sold = 0;


async function checkout(buyer) {
  const left = stock;
  if (left === 0) return;
  await pay(buyer);
  stock = left - 1;
  sold++;
}
Paso a paso, en palabras
  1. Queda una unidad. Dos pedidos llegan en el mismo momento: el de Ana y el de Beto.
  2. El checkout de Ana lee las existencias: left es 1. En el await suelta el hilo hasta que responda el banco.
  3. El hilo está libre, así que se ejecuta el checkout de Beto. También lee 1: Ana todavía no ha escrito nada.
  4. El banco responde a Ana. Su código continúa después de await: stock = left - 1 = 0, sold = 1. Hasta aquí es correcto.
  5. Beto continúa con el left = 1 antiguo: otra vez stock = 0, sold = 2. Una unidad, dos ventas, y con un solo hilo.

Entre dos await el código se ejecuta sin interrupción. Pero en un await la función suelta el hilo, y mientras tanto puede ejecutarse cualquier otra cosa. Cuando continúa, el mundo puede ser distinto: left es un valor leído antes de la espera.

Es el mismo «leer, cambiar, escribir» que con hilos, solo que la interrupción no es en cualquier parte, sino exactamente en el await. Por eso la salida es la misma en cada ejecución: la interrupción no es aleatoria.

La idea

La solución: reservar la unidad antes del await

La comprobación y la reducción deben ser un solo trozo de código sin ningún await en medio. El pedido reserva la unidad de inmediato y solo después espera al banco:

let stock = 1;
let sold = 0;


async function checkout(buyer) {
  if (stock === 0) return;
  stock--;   // reserva la unidad antes del await
  await pay(buyer);
  sold++;
}
Salida
Vendidos: 1, existencias: 0
No hay ningún await entre if (stock === 0) y stock--, así que ningún otro pedido puede colarse en medio. Beto ve 0 y se va.

Si el pago falla, hay que devolver la unidad. Ese es el ejercicio del final.

Más precisamente, para curiosos

A veces hay que bloquear todo el trozo junto con la espera: por ejemplo, solo un pedido a la vez puede escribir en un sistema de almacén antiguo que no soporta dos. Entonces necesitas un cerrojo que entienda await:

Node no trae ninguno. Escribes uno con una promesa (una cola de esperadores) o usas el paquete async-mutex.

Cómo es en los otros lenguajes: en JavaScript y en asyncio hay un hilo, y el trozo entre dos await se ejecuta solo. En C# las continuaciones están en el grupo de hilos, así que allí también hace falta un lock. Java no tiene await: allí se hace lo mismo con CompletableFuture, y desde Java 21 también con hilos virtuales, donde escribes código bloqueante normal y la JVM desmonta el hilo por sí sola mientras espera.

Pruébalo

Encuentra el error

El carrito suma los precios de tres pedidos. El precio viene del almacén con await. Los tres pedidos cuestan 25 € cada uno, y el total sale como 25:

let total = 0;


async function addOrder(id) {
  total += await priceOf(id);
}


await Promise.all([addOrder(1), addOrder(2), addOrder(3)]);
console.log(`Total: ${total} €`);
Salida
Total: 25 €

Elige la línea con el error.

La idea

No bloquees el bucle de eventos

El bucle de eventos solo funciona si ningún trozo de código retiene el hilo durante mucho tiempo. El informe de ventas se hace con un bucle que calcula durante 300 ms. A la vez, un cliente abre la página de un producto, que espera 50 ms al almacén:

function buildReport() {
  const end = Date.now() + 300;   // calcula 300 ms sin un solo await
  while (Date.now() < end) {}
}


async function report() {
  buildReport();
  console.log("El informe está listo");
}


async function productPage(buyer, start) {
  await sleep(50);
  console.log(`${buyer} espera más de 0,25 s: ${Date.now() - start > 250}`);
}


const start = Date.now();
await Promise.all([report(), productPage("Ana", start)]);
Salida
El informe está listo
Ana espera más de 0,25 s: true

La página esperó más de 0,25 s en lugar de 50 ms. Mientras el informe retiene el hilo, ninguna otra continuación puede ejecutarse: ni esta página, ni los pagos, ni los temporizadores. En un servidor con miles de clientes, todos se congelan a la vez.

La solución es sacar el trabajo pesado del hilo del bucle de eventos. Va a un grupo de hilos o a un Worker, y el bucle de eventos solo espera el resultado:

async function report() {
  const worker = new Worker(new URL(import.meta.url));
  await once(worker, "exit");
  console.log("El informe está listo");
}


async function productPage(buyer) {
  await sleep(50);
  console.log(`${buyer}: la página está lista`);
}


if (isMainThread) {
  await Promise.all([report(), productPage("Ana")]);
} else {
  buildReport();
}
Salida
Ana: la página está lista
El informe está listo
El informe se hace en un Worker: el mismo archivo, donde isMainThread es false. El hilo principal solo espera el evento exit. La página está lista a los 50 ms, el informe a los 300.

Pruébalo

Completa

Lanza las tres peticiones a la vez y espéralas juntas:

await ([
  call("pago", 300),
  call("correo", 100),
  call("almacén", 200),
]);
console.log(`Esperaron a la vez: ${most}`);

Ejercicio

Reservar, cobrar, devolver

Resuélvelo en tu propio editor.

Quedan dos unidades. Cuatro clientes piden a la vez: Ana, Beto, Vera y Gala. El pago tarda 100 ms. La tarjeta de Beto es rechazada: el pago lanza una excepción con el texto «tarjeta rechazada».

checkout reserva la unidad antes del await, luego cobra. Si el pago falla, la unidad se devuelve. Imprime el resultado de cada cliente en el orden de los pedidos, y al final las existencias y el número de vendidos:

Salida
Ana: pagado
Beto: tarjeta rechazada, la unidad se devuelve
Vera: sin existencias
Gala: sin existencias
Existencias: 1, vendidos: 1

Vera y Gala ven «sin existencias», porque la unidad de Beto sigue reservada hasta que responde el banco. Es justo: la unidad devuelta va al siguiente cliente.

Más tareas

  • Intentar de nuevo. Si un cliente no encuentra existencias pero otro podría devolver una unidad, déjalo esperar hasta 200 ms y volver a intentarlo.
  • Timeout. El banco a veces no responde. Si el pago tarda más de 1 s, rechaza el pedido y devuelve la unidad. (AbortSignal.timeout)
  • Informe. Calcula el total de las ventas (25 € cada una) e imprímelo al final.

Test

Ponte a prueba

1. ¿En cuántos hilos se ejecuta tu código en JavaScript (Node) y en Python asyncio?
2. Tres peticiones esperan 100, 200 y 300 ms. ¿Cuánto tarda todo si las esperas una por una con await, y cuánto con Promise.all, gather, Task.WhenAll o allOf?
3. En JavaScript y Python una función async lee datos compartidos, espera con await y luego escribe. ¿Cuándo puede otro código cambiar los datos?
4. Atender una petición incluye un cálculo que dura 2 segundos, sin un solo await. ¿Qué pasa con las demás peticiones en Node o asyncio?
5. ¿Cómo evitas vender dos veces la última unidad?

Creado por Ivo Gergov como parte de la campaña de Evo Tech por una educación accesible en programación ·