Utilisation de l'API Fetch

L'API Fetch est une interface moderne et puissante pour effectuer des requêtes HTTP asynchrones dans les navigateurs web. Elle fournit une manière simple et logique de récupérer des ressources à travers le réseau, et est conçue pour remplacer l'ancienne API XMLHttpRequest. Voici une introduction à l'API Fetch, comment envoyer des requêtes GET et POST, et comment gérer les réponses et les erreurs.

Introduction à l'API Fetch

L'API Fetch permet de faire des requêtes réseau similaires à XMLHttpRequest, mais de manière plus simple et plus propre. Elle utilise des Promesses, ce qui permet de gérer les réponses de manière asynchrone avec un code plus lisible et facile à maintenir.

• Syntaxe de base : La fonction fetch() prend un argument obligatoire, le chemin de la ressource que vous souhaitez récupérer, et retourne une Promesse qui résout avec l'objet Response représentant la réponse à la requête.

  fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('Erreur:', error));
  

Envoi de requêtes GET et POST

• Requête GET : Utilisée pour récupérer des données d'un serveur. C'est la méthode par défaut lorsque vous utilisez fetch.

  fetch('https://api.example.com/aliments')
      .then(response => {
          if (!response.ok) {
              throw new Error('Erreur réseau');
          }
          return response.json();
      })
      .then(data => console.log(data))
      .catch(error => console.error('Erreur:', error));
  

   

  Dans cet exemple, une requête GET est envoyée à l'URL spécifiée. Si la réponse est réussie, les données sont converties en JSON et affichées dans la console.

• Requête POST : Utilisée pour envoyer des données à un serveur, souvent pour créer une nouvelle ressource.

  fetch('https://api.example.com/aliments', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json',
      },
      body: JSON.stringify({nom: 'Pomme', type: 'fruit', emoji: '🍎'})
  })
  .then(response => {
      if (!response.ok) {
          throw new Error('Erreur réseau');
      }
      return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Erreur:', error));
  

   

  Dans cet exemple, une requête POST est envoyée avec des données JSON dans le corps de la requête. Les en-têtes sont définis pour indiquer que le contenu est de type JSON.

Gestion des réponses et des erreurs

• Gestion des réponses : Lorsque vous utilisez fetch, vous devez vérifier si la réponse est réussie en utilisant la propriété ok de l'objet Response. Si response.ok est true, cela signifie que la réponse a un statut HTTP de succès (200-299).

  fetch('https://api.example.com/data')
      .then(response => {
          if (!response.ok) {
              throw new Error('Erreur réseau');
          }
          return response.json();
      })
      .then(data => console.log(data));
  

• Gestion des erreurs : Vous pouvez utiliser .catch() pour capturer et gérer les erreurs qui peuvent survenir lors de la requête, comme des problèmes de réseau ou des erreurs de serveur.

  fetch('https://api.example.com/data')
      .then(response => {
          if (!response.ok) {
              throw new Error('Erreur réseau');
          }
          return response.json();
      })
      .then(data => console.log(data))
      .catch(error => console.error('Il y a eu un problème avec l\'opération fetch:', error));
  

   

En utilisant l'API Fetch, vous pouvez facilement interagir avec des API REST pour envoyer et recevoir des données, ce qui est essentiel pour créer des applications web dynamiques et interactives. L'utilisation de Promesses avec fetch rend le code asynchrone plus lisible et facile à gérer.