Lección 11 · 11 de 20

Promesas · JavaScript

Aprenda cómo funcionan las promesas en JavaScript: resolve y reject, cadenas de then, catch para los errores y finally para cerrar.

JavaScript · Promesas en DMarlon Studio: el código del ejemplo y su salida en la terminal

Una promesa representa un resultado que todavía no existe: empieza pendiente y termina cumplida (con un valor) o rechazada (con un error). checkStock crea una con new Promise, que recibe dos funciones: llama a resolve cuando tiene el dato y a reject cuando algo va mal. El setTimeout de 50 ms simula la espera de un almacén o de un servidor.

Fíjese en el orden de la salida: la línea 2 aparece antes que la 3, aunque está al final del programa. JavaScript no se detiene a esperar la promesa; sigue ejecutando el código y, cuando llega la respuesta, ejecuta las funciones registradas con `then`.

Cada then devuelve una promesa nueva, así que se pueden encadenar: lo que devuelve un then (aquí, info.units * 899) es lo que recibe el siguiente. Si devuelve otra promesa, como checkStock("mouse"), la cadena espera a que esta se resuelva.

Cuando una promesa se rechaza, la cadena salta todos los then hasta el primer `catch`: por eso no aparece This line is skipped. `finally` se ejecuta al final pase lo que pase, ideal para cerrar una conexión u ocultar un indicador de carga. En la próxima lección verá async/await, que permite escribir lo mismo como código secuencial.

Código · main.js

const stock = { laptop: 3, mouse: 0 };// A promise stands for a result that arrives later.function checkStock(product) {  return new Promise((resolve, reject) => {    setTimeout(() => {      if (!(product in stock)) reject(new Error(`Unknown product: ${product}`));      else if (stock[product] === 0) reject(new Error(`${product} is out of stock`));      else resolve({ product, units: stock[product] });    }, 50); // pretend the warehouse takes 50 ms to answer  });}console.log("1. Asking the warehouse...");checkStock("laptop")  .then((info) => {    console.log(`3. ${info.units} units of ${info.product}`);    return info.units * 899; // the next then receives this value  })  .then((value) => {    console.log(`4. Stock value: ${value} EUR`);    return checkStock("mouse"); // returning a promise: the chain waits for it  })  .then(() => console.log("This line is skipped"))  .catch((err) => console.log("5. Error:", err.message))  .finally(() => console.log("6. Request closed"));console.log("2. This line runs before the answer arrives");

Salida · node main.js

1. Asking the warehouse...
2. This line runs before the answer arrives
3. 3 units of laptop
4. Stock value: 2697 EUR
5. Error: mouse is out of stock
6. Request closed

Para recordar

Una promesa está pendiente, cumplida o rechazada.
resolve entrega el valor y reject, el error.
Lo que devuelve un then llega al siguiente; si es una promesa, se espera.
Un rechazo salta hasta el primer catch; finally se ejecuta siempre.

Ejercicio

Cambie checkStock("laptop") por checkStock("tablet"), un producto que no existe, y observe qué pasos se saltan. Después ponga un catch intermedio que devuelva 0 para que la cadena continúe.