Guide complet de l’API fetch

La fonction fetch en JavaScript est une API moderne qui permet d’effectuer des requêtes réseau asynchrones, notamment des requêtes HTTP. Elle offre une alternative aux méthodes plus anciennes comme XMLHttpRequest, avec une syntaxe plus simple et une meilleure prise en charge des promesses, facilitant ainsi le travail avec les données asynchrones.

Syntaxe de base :

La syntaxe de base de fetch est assez simple :

javascriptCopy code
fetch(url)
  .then(response => {
    // Gérer la réponse
  })
  .catch(error => {
    // Gérer l'erreur
  });

Dans cet exemple, url est l’URL vers laquelle la requête sera envoyée. La méthode fetch renvoie une promesse qui sera résolue une fois que la requête sera terminée, soit avec une réponse, soit avec une erreur.

Gestion de la réponse :

Une fois que la promesse est résolue, vous pouvez gérer la réponse en utilisant la méthode then. La réponse est un objet Response qui représente la réponse HTTP.

javascriptCopy code
fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('Erreur HTTP, statut ' + response.status);
    }
    return response.json(); // Convertir la réponse en JSON
  })
  .then(data => {
    // Faire quelque chose avec les données
  })
  .catch(error => {
    // Gérer l'erreur
  });

Dans cet exemple, nous vérifions d’abord si la réponse est valide (statut 200). Ensuite, nous utilisons la méthode json() pour extraire le contenu de la réponse sous forme de JSON, car cela est courant lors de l’utilisation de fetch pour récupérer des données JSON.

Options de requête :

fetch prend également un deuxième argument optionnel, un objet init, où vous pouvez spécifier différentes options pour la requête, telles que la méthode HTTP, les en-têtes, le corps de la requête, etc.

javascriptCopy code
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(response => {
  // Gérer la réponse
})
.catch(error => {
  // Gérer l'erreur
});

Dans cet exemple, nous envoyons une requête POST avec un corps JSON. Les en-têtes sont spécifiés pour indiquer que le contenu de la requête est de type JSON.

Utilisation avec les APIs asynchrones :

fetch est souvent utilisé en conjonction avec les async/await, qui offrent une syntaxe asynchrone plus propre et plus facile à comprendre.

javascriptCopy code
async function fetchData() {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Erreur HTTP, statut ' + response.status);
    }
    const data = await response.json();
    // Faire quelque chose avec les données
  } catch (error) {
    // Gérer l'erreur
  }
}

Dans cette approche, la fonction fetchData est déclarée avec le mot-clé async, ce qui lui permet d’utiliser await pour attendre la résolution de la promesse retournée par fetch.

Support du CORS :

Il est important de noter que fetch suit la politique de même origine (Same Origin Policy), ce qui signifie qu’il est soumis aux restrictions de CORS (Cross-Origin Resource Sharing) lorsqu’il est utilisé pour effectuer des requêtes entre des origines différentes. Cela signifie que, par défaut, les requêtes fetch sont restreintes par rapport à l’origine qui les a initiées, et nécessitent souvent une configuration spéciale du serveur pour permettre l’accès à d’autres origines.

En résumé, fetch est une API puissante et flexible pour effectuer des requêtes réseau asynchrones en JavaScript. Elle offre une syntaxe moderne basée sur les promesses, qui simplifie la gestion des requêtes et des réponses, et est largement utilisée dans le développement web moderne pour interagir avec les API et récupérer des données à partir de serveurs distants.

Bien sûr, plongeons plus profondément dans les fonctionnalités et l’utilisation avancée de l’API fetch en JavaScript.

1. Utilisation des méthodes HTTP autres que GET et POST :

Outre les requêtes GET et POST, fetch prend en charge d’autres méthodes HTTP telles que PUT, DELETE, PATCH, etc. Vous pouvez les spécifier dans l’objet d’options passé en deuxième argument à fetch.

javascriptCopy code
fetch(url, {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(response => {
  // Gérer la réponse
})
.catch(error => {
  // Gérer l'erreur
});

Cette utilisation permet d’effectuer une mise à jour (PUT) sur une ressource distante en envoyant les données JSON spécifiées dans le corps de la requête.

2. Gestion des en-têtes :

Vous pouvez spécifier des en-têtes personnalisés dans l’objet d’options pour contrôler divers aspects de la requête, tels que le type de contenu, l’authentification, etc.

javascriptCopy code
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer '
  },
  body: JSON.stringify(data)
})
.then(response => {
  // Gérer la réponse
})
.catch(error => {
  // Gérer l'erreur
});

Dans cet exemple, nous avons ajouté un en-tête d’autorisation (Authorization) contenant un jeton (token) pour authentifier la requête.

3. Gestion des cookies et de l’authentification :

fetch ne transmet pas automatiquement les cookies de session, sauf si vous spécifiez l’option credentials dans l’objet d’options.

javascriptCopy code
fetch(url, {
  method: 'GET',
  credentials: 'include' // Transmettre les cookies de session
})
.then(response => {
  // Gérer la réponse
})
.catch(error => {
  // Gérer l'erreur
});

Cela permet de transmettre les cookies de session avec la requête, ce qui est nécessaire pour maintenir l’authentification utilisateur sur les sites web.

4. Téléchargement de fichiers :

fetch peut être utilisé pour télécharger des fichiers binaires, tels que des images ou des fichiers PDF, en spécifiant le type de réponse attendu.

javascriptCopy code
fetch(url)
.then(response => {
  if (!response.ok) {
    throw new Error('Erreur HTTP, statut ' + response.status);
  }
  return response.blob(); // Récupérer le contenu comme un objet Blob
})
.then(blob => {
  // Faire quelque chose avec le fichier
})
.catch(error => {
  // Gérer l'erreur
});

Dans cet exemple, response.blob() est utilisé pour récupérer le contenu de la réponse sous forme d’objet Blob, qui peut ensuite être utilisé pour créer des URLs de données ou pour d’autres manipulations.

5. Utilisation avancée avec les itérateurs de flux (Streams) :

fetch prend en charge les itérateurs de flux, ce qui permet de gérer des réponses de grande taille de manière efficace, sans avoir besoin de charger tout le contenu en mémoire.

javascriptCopy code
fetch(url)
.then(response => {
  const reader = response.body.getReader();
  // Lire le flux de manière asynchrone
  return new ReadableStream({
    start(controller) {
      function push() {
        reader.read().then(({ done, value }) => {
          if (done) {
            controller.close();
            return;
          }
          controller.enqueue(value);
          push();
        }).catch(error => {
          controller.error(error);
        });
      }
      push();
    }
  });
})
.then(stream => {
  // Faire quelque chose avec le flux
})
.catch(error => {
  // Gérer l'erreur
});

Cette approche permet de gérer des réponses de grande taille de manière efficace, en les traitant progressivement à mesure qu’elles arrivent, plutôt que de les charger en une seule fois en mémoire.

En conclusion, l’API fetch en JavaScript offre une flexibilité et une puissance considérables pour effectuer des requêtes réseau asynchrones et interagir avec des ressources distantes. Avec ses nombreuses fonctionnalités et options avancées, elle est largement utilisée dans le développement web moderne pour récupérer des données, télécharger des fichiers, interagir avec des APIs, et bien plus encore. Son utilisation conjointe avec les promesses, les async/await et les itérateurs de flux permet de gérer efficacement des opérations réseau complexes dans les applications web.