Chapitre 18 – Requêtes HTTP et APIs

JavaScript permet d'interagir avec des serveurs distants en envoyant des requêtes HTTP. Ces requêtes sont essentielles pour récupérer des données, envoyer des formulaires, ou interagir avec des services distants appelés APIs (Interfaces de Programmation Applicative).

Zone de démonstration interactive

Les résultats des requêtes HTTP apparaîtront ici...

GET

POST

PUT

DELETE

Récupère les données d'un utilisateur depuis JSONPlaceholder API

Crée un nouveau post sur JSONPlaceholder API

Modifie un post existant sur JSONPlaceholder API

Supprime un post sur JSONPlaceholder API

1. L'objet `fetch`

fetch est une méthode moderne et native permettant d'effectuer des requêtes réseau de façon asynchrone. Elle retourne une promesse qui se résout avec la réponse du serveur.

fetch('https://api.exemple.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`Erreur HTTP: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Erreur :', error));

Version avec async/await :

async function fetchData() {
  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:', error);
  }
}

2. Requêtes GET, POST, PUT, DELETE

GET

POST

PUT

DELETE

GET Récupérer des données

Utilisée pour récupérer des données depuis le serveur.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data));

POST Envoyer des données

Utilisée pour envoyer des données (création).

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Nouveau post',
    body: 'Contenu du post',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log(data));

PUT Modifier une ressource

Utilisée pour modifier entièrement une ressource.

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Titre modifié',
    body: 'Contenu mis à jour',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log(data));

DELETE Supprimer une ressource

Utilisée pour supprimer une ressource.

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE'
})
  .then(response => {
    if (response.ok) {
      console.log('Ressource supprimée');
    }
  });

3. Appels à une API REST

Une API REST est une interface qui permet d'accéder à des données via des requêtes HTTP simples. Chaque action (lire, écrire, modifier, supprimer) est associée à une méthode HTTP (GET, POST, PUT, DELETE).

// Exemple complet avec gestion d'erreur
async function getUsers() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    
    if (!response.ok) {
      throw new Error(`Erreur HTTP: ${response.status}`);
    }
    
    const users = await response.json();
    
    // Afficher les noms d'utilisateurs
    users.forEach(user => {
      console.log(user.name);
    });
    
    return users;
  } catch (error) {
    console.error('Erreur lors de la récupération des utilisateurs:', error);
    throw error;
  }
}

4. Traiter la réponse JSON

La méthode response.json() convertit automatiquement la réponse HTTP (du type ReadableStream) en un objet JavaScript utilisable. Il faut toujours l'appeler dans un then() car elle retourne une promesse.

fetch('https://api.exemple.com/data')
  .then(res => {
    if (!res.ok) throw new Error('Erreur de réseau');
    return res.json();
  })
  .then(data => {
    console.log('Voici les données JSON :', data);
    // Traiter les données...
  })
  .catch(err => {
    console.error('Erreur:', err);
  });

Résumé du chapitre

L'objet fetch permet d'envoyer des requêtes HTTP (GET, POST, PUT, DELETE).
Les réponses peuvent être traitées grâce à la méthode .json() qui convertit le corps en objet JavaScript.
POST et PUT nécessitent un corps au format JSON, transmis via JSON.stringify() et l'en-tête 'Content-Type': 'application/json'.
Les appels à des API REST suivent des conventions pour manipuler des ressources à distance.
L'asynchronisme des requêtes implique d'utiliser .then(), .catch() ou async/await.
Toujours vérifier response.ok ou le statut HTTP pour gérer les erreurs.

Maîtriser les requêtes HTTP est essentiel pour construire des applications web dynamiques, connectées à des serveurs ou des APIs tierces.