Interagir avec une API REST en JavaScript (Fetch)

Le fonctionnement de l’API Fetch

L’API Fetch est une interface JavaScript moderne permettant d’effectuer des requêtes HTTP de manière asynchrone. Elle remplace l’ancienne méthode XMLHttpRequest en proposant une syntaxe plus concise et basée sur les Promesses, ce qui rend le code plus lisible et plus facile à maintenir.

Une requête Fetch commence par l’appel de la fonction fetch(), qui prend en argument l’URL de l’API. Cette fonction retourne une promesse qui se résout en un objet Response une fois que le serveur a répondu.

Récupérer des données avec une requête GET

La méthode GET est la plus courante ; elle est utilisée pour demander des informations à un serveur sans modifier l’état de la ressource.

L’approche classique avec .then()

L’approche utilisant les promesses s’appuie sur l’enchaînement de méthodes .then() pour traiter la réponse et transformer les données brutes en format JSON.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
      if (!response.ok) {
            throw new Error('Erreur réseau : ' + response.status);
                }
                    return response.json();
                      })
                        .then(data => {
                            console.log('Données reçues :', data);
                              })
                                .catch(error => {
                                    console.error('Erreur lors de la récupération :', error);
                                     });

L’approche moderne avec async et await

Pour éviter l’empilement des .then(), JavaScript propose les mots-clés async et await. Cette syntaxe permet d’écrire du code asynchrone qui ressemble à du code synchrone, facilitant ainsi la lecture et la maintenance.

async function getPost() {
	try {
    	const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        
                if (!response.ok) {
                      throw new Error(`Erreur HTTP ! Statut : ${response.status}`);
                          }
                          
const data = await response.json();
console.log(data);
  } catch (error) {
      console.error('Une erreur est survenue :', error);
        }
        }
        
        getPost();

Gérer les erreurs et les réponses HTTP

La propriété response.ok est un booléen qui est true si le code de statut HTTP se situe entre 200 et 299. Si elle est false, vous devez gérer l’erreur manuellement pour éviter de tenter de parser un corps de réponse qui pourrait être vide ou contenir un message d’erreur HTML.

Envoyer des données vers une API REST

Pour interagir avec une API REST au-delà de la simple lecture, vous devez passer un objet d’options en deuxième argument de la fonction fetch() pour spécifier la méthode, les en-têtes et le corps de la requête.

Créer une ressource avec POST

La méthode POST est utilisée pour envoyer des données au serveur afin de créer une nouvelle ressource.

async function createPost() {
  const postData = {
      title: 'Mon nouvel article',
      body: 'Contenu de l'article généré via Fetch',
      userId: 1
        };
        
try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
            'Content-Type': 'application/json'
                  },
    body: JSON.stringify(postData)
        });
        
if (!response.ok) {
      throw new Error('Erreur lors de la création');
          }
const result = await response.json();
    console.log('Succès :', result);
      } catch (error) {
          console.error('Erreur :', error);
             }
            }
            
            createPost();

Mettre à jour ou supprimer des données

Pour modifier une ressource existante, on utilise PUT (remplacement complet) ou PATCH (modification partielle). Pour supprimer une ressource, on utilise DELETE.

// Exemple de suppression (DELETE)
async function deletePost(id) {
  try {
      const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
            method: 'DELETE'
                });
                    if (response.ok) {
                          console.log(`Post ${id} supprimé avec succès`);
                              }
                                } catch (error) {
                                    console.error('Erreur lors de la suppression :', error);
                                      }
      }
                                      
      deletePost(1);

Synthèse des méthodes HTTP

Maîtriser l’API Fetch est essentiel pour tout développeur JavaScript moderne. En combinant async/await et une gestion rigoureuse des erreurs via response.ok, vous pouvez construire des applications web dynamiques et robustes communiquant efficacement avec n’importe quel service REST.