En plus de la fonction native fetch(), il existe plusieurs bibliothèques tierces 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 et des avantages supplémentaires 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 le fetch() natif ?

Bien que l'API fetch() soit puissante, elle présente certaines limitations que les bibliothèques tierces comme Axios résolvent :

• Analyse JSON automatique : Axios analyse automatiquement les réponses JSON, alors qu'avec fetch(), vous devez appeler manuellement response.json();
• Délais d'attente : Axios vous permet de définir des délais d'attente pour les requêtes, ce qui n'est pas pris en charge nativement par fetch();
• Intercepteurs de requêtes et de réponses : Axios fournit des intercepteurs qui vous permettent d'exécuter des fonctions avant qu'une requête ne soit envoyée ou après qu'une réponse soit reçue, ce qui est utile pour ajouter des jetons d'authentification ou enregistrer des requêtes;
• Syntaxe plus simple : Axios a une syntaxe plus simple et plus cohérente pour effectuer des requêtes et gérer les réponses;
• Support pour les anciens navigateurs : Axios a un support intégré pour les anciens navigateurs qui peuvent ne pas prendre en charge pleinement l'API fetch() native.

Utilisation de base d'Axios

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

Requête GET avec Axios

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

Requête POST avec Axios

Cet exemple démontre 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 pour un nouveau post, y compris title, body, et userId. Axios envoie automatiquement les données au format JSON, simplifiant le processus. Le bloc try...catch gère les erreurs éventuelles, affichant soit le titre du post créé, soit un message d'erreur dans le HTML.

Gestion des erreurs avec Axios

Axios fournit un mécanisme facile à utiliser pour la gestion des erreurs. Si la requête échoue (par exemple, problème de réseau ou erreur serveur), Axios lance automatiquement une erreur, qui peut être gérée en utilisant try...catch.

Cet exemple démontre la gestion des erreurs avec Axios. La fonction getInvalidPost tente de récupérer des données à partir d'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, affichant le message d'erreur dans le HTML.

Fonctionnalités supplémentaires et avantages d'Axios

Explorons quelques fonctionnalités supplémentaires d'Axios.

Intercepteurs de requêtes et de réponses

Axios vous permet d'intercepter les requêtes et les réponses pour les modifier avant qu'elles ne soient traitées. Cela est utile pour ajouter des jetons d'authentification, enregistrer 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);
  }
);

Support de Timeout

Axios vous permet de définir des délais 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 lorsqu'un statut de réponse sort de la plage 2xx, vous permettant ainsi de gérer les échecs de manière standardisée.

Support des navigateurs

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