Chapitre 15 – Asynchronisme en JavaScript

L'asynchronisme permet à JavaScript de gérer des opérations longues (comme des appels réseau ou des minuteries) sans bloquer l'exécution du reste du programme. C'est une fonctionnalité essentielle pour développer des interfaces interactives et réactives.

1. Les fonctions asynchrones en JavaScript

Par défaut, JavaScript est synchrone : les instructions sont exécutées ligne par ligne. Mais certaines tâches prennent du temps (ex. : accéder à un serveur). Pour éviter de bloquer l'exécution, on utilise des techniques asynchrones.

Exemple synchrone

console.log("Début");
console.log("Fin");

Exemple asynchrone avec setTimeout

console.log("Début");

setTimeout(() => {
  console.log("Tâche longue terminée");
}, 2000);

console.log("Fin");

La tâche longue (le setTimeout) est reportée, laissant les autres instructions s'exécuter immédiatement.

2. Les promesses (Promise)

Une Promise représente une valeur potentielle qui sera disponible dans le futur. Elle peut être dans trois états :

• Pending : en attente
• Fulfilled : terminée avec succès
• Rejected : échouée

Créer une promesse

const promesse = new Promise((resolve, reject) => {
  const succès = true;

  if (succès) {
    resolve("Tout s'est bien passé !");
  } else {
    reject("Une erreur est survenue.");
  }
});

3. then, catch, finally

Une fois qu'une promesse est créée, on peut utiliser :

• then() pour gérer le succès,
• catch() pour gérer les erreurs,
• finally() pour exécuter du code dans tous les cas.

promesse
  .then((résultat) => {
    console.log(résultat);
  })
  .catch((erreur) => {
    console.error(erreur);
  })
  .finally(() => {
    console.log("Fin de l'opération asynchrone.");
  });

4. async / await

Pour écrire du code asynchrone de manière plus lisible, on utilise les mots-clés async et await.

• async transforme une fonction en fonction asynchrone (elle renvoie automatiquement une promesse).
• await permet d'attendre la résolution d'une promesse.

function obtenirUtilisateur() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Utilisateur récupéré");
    }, 1000);
  });
}

async function afficherUtilisateur() {
  console.log("Chargement...");
  const utilisateur = await obtenirUtilisateur();
  console.log(utilisateur);
}

afficherUtilisateur();

Le code semble synchrone mais utilise l'asynchronisme en arrière-plan.

5. Gestion des erreurs asynchrones

Avec async/await, on peut utiliser try...catch pour capturer les erreurs :

async function obtenirDonnées() {
  try {
    const réponse = await fetch("https://exemple.com/api");
    const données = await réponse.json();
    console.log(données);
  } catch (erreur) {
    console.error("Erreur lors de la requête :", erreur);
  }
}

Ce modèle est largement utilisé dans les applications modernes, notamment avec fetch, axios, ou les APIs web.

6. API Fetch en détail

L'API Fetch permet de faire des requêtes HTTP asynchrones. Elle retourne une promesse qui se résout avec la réponse du serveur.

async function chargerDonnées() {
  try {
    const response = await fetch('https://api.exemple.com/data');
    
    if (!response.ok) {
      throw new Error(`Erreur HTTP: ${response.status}`);
    }
    
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Erreur de chargement:", error);
  }
}