En plus de la fonction native fetch(), plusieurs bibliothèques tierces sont disponibles pour effectuer des requêtes HTTP en JavaScript. L'une des bibliothèques les plus populaires est Axios ( Documentation Axios). Ces bibliothèques offrent des fonctionnalités supplémentaires et des avantages qui peuvent simplifier le travail avec les API et améliorer la lisibilité du code.

Pourquoi utiliser Axios ou d'autres bibliothèques plutôt que fetch() natif ?

Bien que l'API fetch() soit puissante, elle présente certaines limitations que des bibliothèques tierces comme Axios permettent de surmonter :

• Analyse JSON automatique : Axios analyse automatiquement les réponses JSON, alors qu'avec fetch(), il faut appeler manuellement response.json() ;
• Gestion des délais d'expiration : Axios permet de définir des délais d'expiration pour les requêtes, fonctionnalité non prise en charge nativement par fetch() ;
• Intercepteurs de requêtes et de réponses : Axios propose des intercepteurs permettant d'exécuter des fonctions avant l'envoi d'une requête ou après la réception d'une réponse, ce qui est utile pour ajouter des jetons d'authentification ou pour la journalisation des requêtes ;
• Syntaxe simplifiée : Axios offre une syntaxe plus simple et plus cohérente pour effectuer des requêtes et traiter les réponses ;
• Compatibilité avec les anciens navigateurs : Axios intègre une prise en charge des anciens navigateurs qui ne prennent pas entièrement en charge l'API fetch() native.

Utilisation de base d'Axios

Axios propose une syntaxe simple pour effectuer des requêtes GET et POST. Il retourne des Promises, tout comme fetch(), mais gère automatiquement certaines tâches répétitives comme l'analyse du JSON.

Requête GET avec Axios

Cet exemple illustre l'utilisation d'Axios pour une requête GET. La fonction getPostWithAxios appelle axios.get() afin de récupérer des données depuis un point de terminaison d'API (/posts/1). Axios simplifie le processus en analysant automatiquement la réponse JSON, supprimant ainsi la nécessité d'un appel séparé à .json(). Le bloc try...catch gère les éventuelles erreurs, affichant soit le titre de l'article, soit un message d'erreur dans le HTML.

Requête POST avec Axios

Cet exemple illustre une requête POST utilisant Axios pour envoyer des données à une API. La fonction sendPostWithAxios appelle axios.post() avec le point de terminaison de l’API (/posts) et les données d’un nouveau post, comprenant title, body et userId. Axios envoie automatiquement les données au format JSON, simplifiant ainsi le processus. Le bloc try...catch gère les éventuelles erreurs, affichant soit le titre du post créé, soit un message d’erreur dans le HTML.

Gestion des erreurs avec Axios

Axios propose un mécanisme simple pour la gestion des erreurs. Si la requête échoue (par exemple, problème réseau ou erreur serveur), Axios déclenche automatiquement une erreur, qui peut être gérée à l’aide de try...catch.

Cet exemple illustre la gestion des erreurs avec Axios. La fonction getInvalidPost tente de récupérer des données depuis un point de terminaison inexistant en utilisant axios.get(). Lorsque la requête échoue, Axios génère automatiquement une erreur. Le bloc try...catch intercepte cette erreur et affiche le message d’erreur dans le HTML.

Fonctionnalités supplémentaires et avantages d’Axios

Présentation de certaines fonctionnalités supplémentaires d’Axios.

Intercepteurs de requêtes et de réponses

Axios permet d’intercepter les requêtes et les réponses afin de les modifier avant leur traitement. Cette fonctionnalité est utile pour ajouter des jetons d’authentification, journaliser les requêtes ou gérer les erreurs globales.

axios.interceptors.request.use(
  config => {
    // Modify request config (e.g., add authentication token)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Prise en charge du délai d’attente

Axios permet de définir des délais d’attente pour les requêtes, ce qui garantit que la requête ne reste pas bloquée indéfiniment.

axios
  .get('https://jsonplaceholder.typicode.com/posts/1', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Request timed out', error));

Gestion simplifiée des erreurs

Axios génère automatiquement des erreurs lorsque le statut de la réponse sort de la plage 2xx, ce qui permet de gérer les échecs de manière standardisée.

Compatibilité avec les navigateurs

Axios fonctionne avec tous les navigateurs modernes et fournit des polyfills pour les anciens navigateurs, ce qui en fait une option plus polyvalente pour certains projets.