Visualiser les promesses

Passez à travers…

Pour visualiser le déroulement des Promises, définissons une nouvelle fonction delay(millisecs).

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

Il s’agit d’une fonction utilitaire qui se résout une fois le délai écoulé.

Le délai en millisecondes sera transmis au callback de .then.

Examinons 4 exemples (avec des chronologies animées).

Exemple #1/4

Celui‑ci montre comment l’exécution de console.log() est retardée par delay(msec).

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

Exemple #2/4

Ça montre une erreur fréquente.

Le console.log s’exécute dès que le delay(1000) commence. Pas après le délai comme vous l’aviez probablement prévu.

Comme console.log renvoie undefined, notre .then() est silencieusement ignoré.

Notez la différence entre typeof console.log === 'function' et typeof console.log() === undefined.

En pratique, l’utilisation correcte de console.log est illustrée dans l’Exemple #1. Veillez à ne passer que des fonctions à .then et .catch.

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

Exemple #3/4

3 Promises s’exécutent simultanément.

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

Exemple #4/4

Promise.all avec 3 promesses delay. Elles s’exécutent simultanément.

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édits :

• Diagrammes animés d’async par Patrick Biffle
• Inspiration pour cet article : https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html