Retour • 17/10/2024

Guide sur Fetch en JavaScript : Pas besoin d'Axios

Écris par Melvyn Malherbe le 17/10/2024

Aujourd'hui, nous allons plonger dans le monde fascinant de fetch, la méthode native de JavaScript pour effectuer des requêtes HTTP. Si tu utilises encore Axios ou d'autres bibliothèques tierces pour tes requêtes, il est temps de découvrir pourquoi fetch pourrait être tout ce dont tu as besoin.

L'histoire de fetch

Avant l'arrivée de fetch, les développeurs JavaScript devaient se battre avec XMLHttpRequest pour effectuer des requêtes asynchrones. C'était complexe, verbeux et parfois frustrant. C'est pourquoi des bibliothèques comme jQuery AJAX et plus tard Axios sont devenues si populaires. Voici un exemple de XMLHttpRequest :

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.send();

Tu vois que le code fait un peu peur... Mais en 2015, une nouvelle ère a commencé avec l'introduction de fetch. Cette API promettait une façon plus simple et plus puissante de faire des requêtes HTTP, directement intégrée dans le navigateur.

Comment utiliser fetch

fetch possède une API à la fois simple mais très puissante qui te permet de réaliser tout ce dont tu as besoin.

Les méthodes

fetch supporte toutes les méthodes HTTP standard. Voici quelques exemples avec leurs utilisations typiques :

• GET : Récupérer des données du serveur (c'est la méthode par défaut)
• POST : Envoyer des données pour créer une nouvelle ressource sur le serveur
• PUT : Mettre à jour une ressource existante sur le serveur
• DELETE : Supprimer une ressource du serveur
• PATCH : Modifier partiellement une ressource existante

Voici comment les utiliser :

// GET (par défaut)
fetch('https://api.example.com/data');

// POST
fetch('https://api.example.com/data', {
  method: 'POST', // Ou `PUT` / `DELETE` / `PATCH`
  // ... autres options
});

Les headers

Les headers dans une requête HTTP permettent de transmettre des informations supplémentaires entre le client et le serveur. Tu peux facilement ajouter des headers à ta requête pour spécifier le type de contenu, gérer l'authentification, et bien plus encore :

fetch('https://api.example.com/data', {
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Bearer YOUR_TOKEN_HERE',
  },
});

Le body

Le body d'une requête HTTP est utilisé pour envoyer des données au serveur. Il est particulièrement utile pour les méthodes comme POST, PUT, ou PATCH, où tu souhaites créer ou modifier des ressources sur le serveur.

Voici à quoi sert le body dans différents contextes :

1. POST : Pour envoyer des données pour créer une nouvelle ressource.
2. PUT : Pour envoyer des données complètes pour remplacer une ressource existante.
3. PATCH : Pour envoyer des données partielles pour mettre à jour une ressource existante.

Avec fetch, tu peux facilement inclure un body dans ta requête. Voici un exemple :

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John Doe',
    age: 30,
  }),
});

Comment récupérer le résultat

On dit qu'on "consomme" le résultat, il faut savoir qu'une réponse HTTP renvoie le header avant d'envoyer le body, le body est "streamé" et peut prendre du temps avant d'être récupéré.

L'objet réponse

fetch retourne une Promise qui se résout avec un objet Response. Cet objet contient des informations précieuses sur la réponse :

fetch('https://api.example.com/data').then((response) => {
  console.log(response.ok); // true si le statut est entre 200-299
  console.log(response.status); // le code de statut HTTP (par exemple, 200)
  console.log(response.statusText); // le message de statut (par exemple, "OK")
});

Comprendre le stream

L'objet Response utilise un mécanisme de streaming. Cela signifie que tu ne peux lire le corps de la réponse qu'une seule fois. Après avoir appelé response.json() ou response.text(), le corps est "consommé" et ne peut plus être lu.

Le JSON

Pour traiter une réponse JSON :

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

Le texte

Pour obtenir la réponse sous forme de texte brut :

fetch('https://api.example.com/data')
  .then((response) => response.text())
  .then((text) => console.log(text));

Utilise ky

Si tu cherches une solution encore plus légère et moderne que fetch, jette un œil à ky. C'est une bibliothèque minuscule qui simplifie encore plus l'utilisation de fetch.

GET avec ky

const data = await ky('/api/user').json();

POST avec ky

const json = await ky.post('https://example.com', { json: { foo: true } }).json();

ky offre une API plus concise et gère automatiquement certains cas d'erreur courants, tout en restant très proche de l'API fetch native.

Pour aller plus loin

Si tu veux approfondir le sujet, j'ai réalisé une vidéo YouTube détaillée sur l'utilisation de fetch en JavaScript. Tu peux la retrouver ici :

Et voici une démo complète qui utilise l'API de Agify :

Dans cet exemple, nous faisons une requête à l'API GitHub pour obtenir les informations de l'utilisateur "github". Essaie de modifier l'URL ou d'ajouter des options pour voir comment fetch se comporte !

Conclusion

fetch est une API puissante et flexible qui couvre la plupart des besoins en matière de requêtes HTTP côté client. Axios n'a plus du tout sa place dans le développement.

En maîtrisant fetch, tu simplifies ton code, réduis les dépendances de ton projet et tires parti d'une API standard du navigateur. Alors la prochaine fois que tu auras besoin de faire une requête HTTP, pense à fetch !

D'ailleurs, je t'invite vraiment à toujours apprendre JavaScript avant TypeScript.