Visualizando Promesas

Rompe la barrera…

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 de utilidad que se resolverá una vez que haya transcurrido el tiempo de espera.

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

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

Example #1/4

Esto muestra cómo la ejecución de console.log() se retrasará mediante delay(msec).

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

Ejemplo #2/4

Esto muestra un error común.

El console.log se dispara justo cuando delay(1000) comienza. No después del retraso como probablemente esperabas.

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

Observe la diferencia entre typeof console.log === 'function' y typeof console.log() === undefined.

En general, el uso correcto de console.log se muestra en el Ejemplo #1. Asegúrese de pasar funciones a .then y .catch.

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

Ejemplo #3/4

3 Promesas se ejecutan simultáneamente.

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

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);

delay(1000) ---| [resolved]------------------v
delay(2000) ---|--------------| [resolved]---v
delay(3000) ---|--------------|--------------v [resolved]
Promise.all()  |--------------|-------------- > console.log([1000, 2000, 3000])
|--------------|--------------|--------------|--------------------------------
|              |              |              |
0msec        1sec           2sec           3sec

Créditos:

• Diagramas animados de asincronía por Patrick Biffle
• Inspiración para este artículo: https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html