Passer au contenu principal

La programmation asynchrone : Maîtriser les mots-clés Async et Await en JavaScript

Le mot-clé async est utilisé pour déclarer une fonction asynchrone. Une fonction asynchrone est une fonction qui renvoie systématiquement une Promesse. Cette Promesse est résolue une fois que toutes les opérations dans la fonction ont été complétées.

À l’intérieur du corps d’une fonction asynchrone, nous pouvons utiliser le mot-clé await avant un appel à une fonction qui renvoie une promesse. L’utilisation de await permet de mettre la fonction en pause jusqu'à ce que la promesse soit résolue, puis renvoie la valeur de résolution de la promesse.

L’avantage principal de l’utilisation de async et await est qu’ils permettent d’écrire du code asynchrone qui ressemble à du code synchrone. Cela rend le code plus facile à lire, à comprendre et à maintenir. Cependant, il est important de noter que malgré l’apparence synchrone, le code est toujours exécuté de manière asynchrone. Cela permet d’éviter le blocage de l’exécution d’autres tâches, ce qui est crucial pour la performance et la réactivité d’une application JavaScript.

L'utilisation de await n'est possible que dans le contexte d'une fonction asynchrone. Si vous essayez d'utiliser await en dehors d'une fonction asynchrone, vous obtiendrez une erreur de syntaxe.

Exemple 1 :

// Une fonction qui retourne une promesse qui se résout après un délai spécifié
function attendre(délai) {
    return new Promise((résoudre) => setTimeout(résoudre, délai));
}

// Une fonction asynchrone
async function fonctionAsynchrone() {
    console.log('Début de la fonction');

    // On utilise 'await' pour attendre que la promesse soit résolue
    await attendre(2000);

    console.log('Fin de la fonction');
}

// Appel de la fonction asynchrone
fonctionAsynchrone();

Exemple 2 :

async function getData() {
  const response = await fetch('https://api.exemple.com/donnees');
  const data = await response.json();

  return data;
}

getData()
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Dans cet exemple, getData est une fonction asynchrone qui utilise fetch pour obtenir des données à partir d’une API. fetch renvoie une promesse qui résout à un objet Response. Nous utilisons await pour attendre que cette promesse soit résolue.

Ensuite, nous appelons la méthode json sur l’objet Response, qui renvoie également une promesse. Nous utilisons à nouveau await pour attendre que cette promesse soit résolue, ce qui nous donne les données JSON que nous voulons.

Enfin, nous renvoyons ces données, qui sont automatiquement enveloppées dans une promesse en raison de l’utilisation du mot-clé async.

Lorsque nous appelons getData, nous utilisons then pour attendre que la promesse soit résolue et catch pour gérer les erreurs éventuelles. Notez que même si nous utilisons async et await à l’intérieur de la fonction, nous devons toujours gérer les promesses lors de l’appel de la fonction.

Retour en haut