Structurer le chargement avec async et await

Quand vous chargez des tâches depuis un serveur, la réponse n’arrive pas immédiatement. Si le code continue sans attendre, il risque d’utiliser les données avant qu’elles soient disponibles. Vous allez structurer le chargement pour attendre chaque étape, puis placer les tâches reçues dans un état en mémoire.

La leçon précédente vous a appris à appeler `fetch`, à vérifier `response.ok` et à lire le corps JSON d’une réponse. Ici, vous allez reprendre ces opérations avec `async` et `await` afin de rendre leur ordre explicite. L’exemple ci-dessous est autonome et peut être exécuté dans un fichier JavaScript chargé comme module ou collé dans la console du navigateur.

Déclarer une fonction asynchrone

Le mot-clé `async` placé devant une fonction indique qu’elle réalise un travail asynchrone. Une fonction `async` renvoie toujours une promesse : cette promesse fournira sa valeur de retour lorsque les opérations asynchrones de la fonction seront terminées. Le mot-clé `await`, utilisable ici dans la fonction, permet d’attendre qu’une promesse soit résolue avant de poursuivre les instructions suivantes.

const urlTaches = "https://jsonplaceholder.typicode.com/todos?_limit=3";
let taches = [];

async function chargerTaches() {
  const reponse = await fetch(urlTaches);

  if (!reponse.ok) {
    throw new Error(`Réponse HTTP non réussie : ${reponse.status}`);
  }

  const donnees = await reponse.json();

  const nouvellesTaches = donnees.map(function (donnee) {
    return {
      id: String(donnee.id),
      titre: donnee.title,
      terminee: donnee.completed
    };
  });

  taches = nouvellesTaches;
  return taches;
}

async function demarrer() {
  const tachesChargees = await chargerTaches();
  console.log("Tâches reçues :", tachesChargees);
}

demarrer();

Après la réponse de l’API, la console affiche un tableau de trois tâches. Chaque objet contient `id`, `titre` et `terminee`.

Respecter l’ordre des opérations

Dans `chargerTaches`, le premier `await` attend la promesse renvoyée par `fetch`. Le programme ne passe à la vérification de `reponse.ok` qu’après réception de l’objet réponse. Le deuxième `await` attend ensuite la lecture du JSON : le tableau est transformé uniquement lorsque le contenu est disponible.

La transformation adapte les propriétés de l’API à celles utilisées par le gestionnaire : `title` devient `titre` et `completed` devient `terminee`. L’affectation à `taches` n’a lieu qu’après la réception et la transformation de l’ensemble des données. Vous transmettez ainsi les tâches reçues à l’état en mémoire sans lancer le rendu de la page dans cet exemple.

La fonction `demarrer` attend à son tour `chargerTaches`. Elle ne passe à `console.log` qu’après la fin du chargement et récupère le tableau que `chargerTaches` renvoie. Sans ce second `await`, la variable recevrait une promesse plutôt que le tableau de tâches.

À retenir

• Une fonction marquée `async` renvoie une promesse.
• `await` attend le résultat d’une promesse avant l’instruction suivante.
• Attendez la réponse de `fetch`, puis le JSON de cette réponse.
• Transformez les données reçues avant de les transmettre à l’état de l’application.
• Une fonction asynchrone appelée depuis une autre fonction se coordonne également avec `await`.

Dans la prochaine leçon, vous ajouterez un traitement explicite des erreurs et un retour visuel pendant le chargement.