Partie 11 — JavaScript asynchrone : comprendre le temps et l’attente

Jusqu’ici, nous avons écrit du JavaScript qui s’exécute ligne par ligne, de haut en bas. C’est simple, logique et prévisible.

Mais dans le monde réel, tout n’est pas instantané :

• Une requête réseau prend du temps
• Un serveur met du temps à répondre
• Un utilisateur met du temps à agir

JavaScript doit donc savoir attendre sans bloquer. C’est exactement le rôle du JavaScript asynchrone.

👉 Comprendre l’asynchrone est une étape clé pour passer à des applications modernes.

1) Code synchrone vs code asynchrone (explication humaine)

Le code synchrone fonctionne comme une file d’attente : une tâche après l’autre, sans passer à la suivante avant la fin de la précédente.

console.log("1");
console.log("2");
console.log("3");
  

Résultat :

1
2
3
  

Le code asynchrone, lui, permet de dire :

“Lance cette tâche, mais ne m’attends pas. Continue ton travail.”

console.log("1");

setTimeout(() => {
  console.log("2");
}, 1000);

console.log("3");
  

Résultat :

1
3
2
  

JavaScript ne bloque pas l’exécution pendant l’attente.

2) setTimeout : exécuter plus tard

setTimeout permet d’exécuter une fonction après un délai donné (en millisecondes).

setTimeout(() => {
  console.log("Message après 2 secondes");
}, 2000);
  

Cas d’usage réels :

• Afficher un message temporaire
• Lancer une animation après un délai
• Simuler une requête serveur

3) setInterval : exécuter régulièrement

setInterval exécute une fonction de manière répétée, à un intervalle défini.

let compteur = 0;

const intervalId = setInterval(() => {
  compteur++;
  console.log("Compteur :", compteur);

  if (compteur === 5) {
    clearInterval(intervalId);
  }
}, 1000);
  

Cas d’usage :

• Compte à rebours
• Horloge
• Actualisation automatique

4) Les promesses (Promises) expliquées comme dans la vraie vie

Une promesse est exactement ce que son nom indique : une promesse de faire quelque chose plus tard.

Exemple humain :

• Je promets de t’appeler
• Soit je tiens ma promesse
• Soit je l’échoue

En JavaScript, une promesse peut être :

• pending (en attente)
• resolved (réussie)
• rejected (échouée)

const promesse = new Promise((resolve, reject) => {
  let succes = true;

  setTimeout(() => {
    if (succes) {
      resolve("Opération réussie");
    } else {
      reject("Erreur");
    }
  }, 1500);
});
  

Utilisation :

promesse
  .then(resultat => {
    console.log(resultat);
  })
  .catch(erreur => {
    console.log(erreur);
  });
  

5) async / await : écrire de l’asynchrone comme du synchrone

async / await est une syntaxe moderne qui rend le code asynchrone beaucoup plus lisible.

Même promesse, version async / await :

async function executer() {
  try {
    const resultat = await promesse;
    console.log(resultat);
  } catch (erreur) {
    console.log(erreur);
  }
}

executer();
  

✅ Règle simple : utilisez async / await dès que possible.

6) Récupérer des données depuis une API (fetch)

Une API permet de récupérer des données depuis un serveur : utilisateurs, articles, produits, météo, etc.

Exemple simple avec fetch :

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log("Erreur API :", error);
  });
  

Version moderne avec async / await :

async function chargerUtilisateurs() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const users = await response.json();
    console.log(users);
  } catch (error) {
    console.log("Erreur API :", error);
  }
}

chargerUtilisateurs();
  

C’est exactement ce mécanisme qui est utilisé dans les applications modernes : React, Vue, dashboards, e-commerce, etc.

7) Erreurs fréquentes à éviter

• Oublier que fetch est asynchrone
• Ne pas gérer les erreurs (catch)
• Mélanger callbacks, promises et async/await sans logique
• Bloquer l’interface avec des calculs lourds

👉 L’asynchrone n’est pas compliqué, il est juste différent.

Le JavaScript asynchrone est indispensable pour le web moderne. Une fois compris, il devient naturel et puissant.

Dans la Partie 12, nous mettrons tout ensemble avec des mini-projets concrets pour penser et agir comme un vrai développeur JavaScript.