Visualizzare le Promise

Attraversa...

Per visualizzare come vengono eseguite le Promise, definiamo un nuovo metodo delay(millisecs).

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

Questo è un metodo di utilità che si risolverà una volta trascorso il timeout.

Il ritardo in millisecondi verrà passato al callback di .then.

Esaminiamo 4 esempi (con timeline animate).

Esempio #1/4

Questo mostra come l’esecuzione di console.log() verrà ritardata da delay(msec).

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

Esempio #2/4

Questo mostra un errore comune.

Il console.log viene eseguito proprio quando il delay(1000) inizia. Non dopo il ritardo come probabilmente volevi.

Poiché console.log restituisce undefined, il nostro .then() viene ignorato silenziosamente.

Nota la differenza tra typeof console.log === 'function' e typeof console.log() === undefined.

Generalmente l’uso desiderato per console.log è mostrato nell’Esempio #1. Assicurati di passare funzioni a .then e .catch.

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

Esempio #3/4

3 Promise vengono eseguite simultaneamente.

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

Esempio #4/4

Promise.all con 3 Promise delay. Verranno eseguite simultaneamente.

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

Crediti:

• Diagrammi async animati di Patrick Biffle
• Ispirazione per questo articolo: https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html