Concepts fondamentaux

Communication et récupération de données

Dans les sections précédentes, nous avons utilisé des données “en dur” (mock data) ou locales (généralement un fichier data.js dans le répertoire /assets/ de nos projets). Dans une application réelle, les données vivent sur un serveur distant.

Cycle de vie d’une donnée

Imaginez le flux suivant :

1. Le Frontend (React) envoie une requête (ex: “Donne-moi le profil de l’utilisateur 42”).
2. L’API (Backend) reçoit la requête, vérifie les permissions, et communique avec la Base de données.
3. La Base de données exécute une opération (ex: SELECT * FROM users...).
4. Le Serveur formate le résultat (souvent en JSON) et le renvoie au Frontend.
5. React reçoit la donnée, met à jour son state, et déclenche un nouveau rendu.

Les bases du protocole HTTP

Pour communiquer, le client et le serveur utilisent le protocole HTTP. Chaque requête utilise une “méthode” qui indique l’intention de l’action :

Programmation asynchrone

Jusqu’à présent, nous avons écrit du code synchrone, c’est-à-dire que les instructions s’exécutent une par une, dans l’ordre.

Cependant, lorsqu’une application doit interagir avec une ressource externe (comme une API), certaines opérations peuvent prendre du temps (réseau, serveur, etc.). On ne veut pas bloquer l’application pendant ce temps.

C’est là qu’intervient la programmation asynchrone.

Prenons un exemple simple :

console.log("Début");

fetch("https://api.exemple.com/data");

console.log("Fin");

Même si la requête prend du temps, “Fin” s’affiche immédiatement.

Les Promises

Les appels asynchrones en JavaScript reposent souvent sur des Promises. Une Promise représente une valeur qui sera disponible maintenant (résolue), plus tard (en attente), ou jamais (rejetée).

Syntaxes des requêtes

Utilisation de .then()

La première façon de gérer une Promise est avec la syntaxe .then().

Exemple :

fetch("https://api.exemple.com/data")
  .then(response => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error))

1. fetch() retourne une Promise
2. .then() permet de traiter le résultat
3. .catch() permet de gérer les erreurs

Inconvénients :

• Peut devenir difficile à lire (enchaînement de .then())
• Moins intuitif

Utilisation de async / await

async/await est une syntaxe moderne qui simplifie la lecture du code asynchrone. Elle permet d’écrire du code asynchrone comme s’il était synchrone

Exemple équivalent :

async function getData() {
  try {
    const response = await fetch("https://api.exemple.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Explication :

• async indique que la fonction est asynchrone
• await suspend l’exécution jusqu’à ce que la Promise soit résolue
• try/catch remplace .catch()