Pauses asynchrones en JavaScript : Promises vs. Async/Await

JavaScript, étant monothreadé, ne possède pas d’équivalent direct à la fonction sleep() que l’on trouve dans d’autres langages. Simuler une pause nécessite l’emploi de techniques asynchrones. Cet article explore deux approches : l’une utilisant setTimeout et les Promises, et l’autre utilisant la syntaxe plus propre async/await.

Table des matières

• Implémenter une fonction Sleep avec les Promises
• Implémenter une fonction Sleep avec Async/Await

Implémenter une fonction Sleep avec les Promises

La méthode la plus simple utilise setTimeout au sein d’une Promise. Cela évite de bloquer le thread principal, garantissant ainsi la réactivité de votre application.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

sleep(2000)
  .then(() => console.log("Attente de 2 secondes terminée !"))
  .catch(error => console.error("Une erreur s'est produite :", error));

console.log("Ceci s'exécutera avant la fin de la fonction sleep.");

Explication :

• sleep(ms) : Cette fonction prend la durée d’attente en millisecondes (ms) en argument.
• new Promise(resolve => setTimeout(resolve, ms)) : Une Promise est créée. setTimeout planifie l’appel de la fonction resolve après ms millisecondes. Cela résout la Promise, signalant la fin de l’attente.
• .then() : Ceci gère la Promise résolue, exécutant le code qui s’y trouve une fois l’attente terminée.
• .catch() : Cette section optionnelle gère les erreurs qui pourraient survenir pendant le délai d’attente.

Cette méthode est efficace et évite les écueils du blocage du thread principal. Cependant, l’utilisation de .then() peut sembler moins intuitive pour certains programmeurs.

Implémenter une fonction Sleep avec Async/Await

Async/await offre une solution plus lisible et sans doute plus élégante. Elle s’appuie sur l’approche basée sur les Promises mais simplifie le flux asynchrone.

async function sleep(ms) {
  await new Promise(resolve => setTimeout(resolve, ms));
}

async function myFunction() {
  console.log("Début...");
  await sleep(2000);
  console.log("Attente de 2 secondes terminée !");
}

myFunction();
console.log("Ceci s'exécutera avant la fin de la fonction sleep.");

Explication :

• async function sleep(ms) : Le mot clé async désigne une fonction asynchrone.
• await new Promise(...) : Le mot clé await interrompt l’exécution de sleep jusqu’à ce que la Promise soit résolue. Cette pause ne bloque pas le thread principal.
• async function myFunction() : Cette fonction montre comment utiliser sleep au sein d’une opération asynchrone plus large.

La syntaxe async/await rend le code asynchrone apparemment synchrone, améliorant la lisibilité et la maintenabilité. C’est généralement l’approche préférée pour sa clarté et sa facilité d’utilisation.

Les deux méthodes produisent le même résultat, mais async/await offre une syntaxe plus moderne et plus lisible pour la gestion des opérations asynchrones en JavaScript. Évitez les boucles d’attente active dans le code de production ; elles gèleront votre application.