Visualizando Promesas

Rompe a través de...

Para visualizar cómo se ejecutan las Promesas, definamos un nuevo método delay(millisecs).

function delay(millisecs) {
  return new Promise(resolve => {
    setTimeout(() => resolve(millisecs), millisecs);
  });
}

Este es un método utilitario que se resolverá una vez que haya pasado el timeout.

El delay en milisegundos se pasará al callback de .then.

Veamos 4 ejemplos (con líneas de tiempo animadas).

Ejemplo #1/4

Esto muestra cómo la ejecución de console.log() será retrasada por delay(msec).

delay(1000).then(() => console.log("done"));

Línea de tiempo mostrando delay 1000 luego console log ejecutándose después de un segundo

Ejemplo #2/4

Esto muestra un error común.

El console.log se dispara justo cuando comienza el delay(1000). No después del delay como probablemente querías.

Como console.log retorna undefined, nuestro .then() se ignora silenciosamente.

Nota la diferencia entre typeof console.log === 'function' vs. typeof console.log() === undefined.

Generalmente el uso deseado para console.log se muestra en el Ejemplo #1. Asegúrate de pasar funciones a .then y .catch.

delay(1000).then(console.log("done"));

Línea de tiempo mostrando console log ejecutándose inmediatamente antes de que termine el delay

Ejemplo #3/4

3 Promesas se ejecutan simultáneamente.

delay(1000).then(console.log);
delay(2000).then(console.log);
delay(3000).then(console.log);

Línea de tiempo mostrando tres delay promises resolviéndose después de uno dos y tres segundos

Ejemplo #4/4

Promise.all con 3 Promesas delay. Se ejecutarán simultáneamente.

Promise.all([delay(1000), delay(2000), delay(3000)]).then(console.log);

Línea de tiempo mostrando Promise all esperando a que las tres delay promises se resuelvan

Créditos:

Diagramas async animados por Patrick Biffle

Inspiración para este artículo: https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html