Fetch de données

Qu’est-ce que fetch ?

La méthode fetch() permet de faire des requêtes HTTP pour récupérer ou envoyer des données.
Elle retourne une Promise, ce qui la rend asynchrone.

---

Qu’est-ce que fetch ?

La méthode fetch() est intégrée dans les navigateurs modernes.
Elle permet de faire des requêtes HTTP pour récupérer ou envoyer des données depuis une API.

Elle retourne une Promise, ce qui la rend asynchrone : le code continue de s’exécuter pendant que la requête est en cours.

---

Exemple simple (GET)

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

---

Avec async/await

Grâce à async/await, le code est plus lisible :

async function getPost() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    let data = await response.json();
    console.log(data);
  } catch (e) {
    console.error("Erreur :", e);
  }
}

getPost();

---

Envoyer des données (POST)

On peut aussi envoyer des données avec fetch. Il faut préciser la méthode (POST, PUT, DELETE) et souvent ajouter des headers.

async function createPost() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        title: "Nouveau post",
        body: "Contenu de l'article",
        userId: 1
      })
    });

    let data = await response.json();
    console.log("Créé :", data);
  } catch (e) {
    console.error("Erreur :", e);
  }
}

createPost();

---

Autres méthodes HTTP

• GET → lire des données
• POST → créer une donnée
• PUT → mettre à jour une donnée
• DELETE → supprimer une donnée

---

Vérifier les erreurs HTTP

⚠️ Attention : fetch ne lance pas automatiquement une erreur en cas de statut 404 ou 500.
Il faut vérifier response.ok et response.status manuellement.

let response = await fetch("https://jsonplaceholder.typicode.com/404");

if (!response.ok) {
  console.error("Erreur HTTP :", response.status);
}

---

Points importants

• fetch retourne toujours une Promise.
• response.json() transforme la réponse en objet JavaScript.
• Il faut gérer les erreurs avec try/catch ou .catch().
• fetch ne lance pas d’erreur en cas de statut HTTP 404 ou 500 → il faut vérifier response.ok.

let response = await fetch("https://jsonplaceholder.typicode.com/404");

if (!response.ok) {
  console.error("Erreur HTTP :", response.status);
}

---

Bonnes pratiques

• Toujours vérifier response.ok avant de traiter la réponse.
• Gérer les erreurs avec try/catch (si tu utilises async/await) ou .catch() (si tu utilises les Promises).
• Utiliser correctement les headers (Content-Type, Authorization pour les tokens, etc.).
• Préférer async/await pour garder un code lisible et facile à maintenir.