Axios et récupérer l'API ? Choisir le bon client HTTP

TL;DR : Axios et Fetch API sont des clients HTTP populaires. Axios offre plus de fonctionnalités et une gestion des erreurs plus facile, tandis que l'API Fetch est légère et native pour les navigateurs. Choisissez Axios pour les projets complexes et Fetch pour les plus simples

Deux des méthodes les plus courantes pour gérer les requêtes HTTP asynchrones sont fetch() et Axios. Bien qu'il s'agisse d'une opération courante, le type de demande avec lequel vous choisissez de travailler peut avoir une influence considérable sur la convivialité et l'efficacité globale d'une application. Il est donc sage de les examiner minutieusement et de peser le pour et le contre avant d’en choisir un.

Cet article comparera de manière exhaustive ces deux outils largement utilisés pour vous aider à faire le meilleur choix pour votre projet.

Qu’est-ce qu’Axios ?

est un client HTTP tiers basé sur des promesses, couramment utilisé dans les environnements de navigateur ( XMLHttpRequests) et Node.js (HTTP). Il fournit une API pratique capable d'intercepter les requêtes et les réponses, d'effectuer des annulations de requêtes et d'analyser automatiquement les données de réponse au format JSON. Axios prend également en charge la protection côté client contre XSRF (contrefaçon de requêtes intersites). Vous pouvez installer Axios avec un gestionnaire de packages comme npm ou l'ajouter à votre projet via un CDN.

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

Avantages d'Axios

• Annulation automatique de la demande.
• Gestion des erreurs intégrée, intercepteurs et syntaxe propre.
• Compatibilité avec une large gamme de navigateurs anciens et modernes.
• Basé sur une promesse.

Inconvénients d’Axios

• Dépendance externe.
• Grande taille du bundle et complexité notable.

Qu'est-ce que fetch() ?

L'API Fetch est également basée sur des promesses mais une API JavaScript native disponible dans tous les navigateurs modernes. Il est également compatible avec les environnements Node.js et a remplacé l'ancien XMLHttpRequests par une approche plus simple et plus contemporaine. L'API Fetch fournit la méthode fetch() pour envoyer des requêtes et prend en charge plusieurs types de requêtes et de réponses tels que JSON, Blob et FormData.

Avantages de fetch()

• Support natif du navigateur, donc pas de dépendances externes.
• API légère et plus simple.
• Basé sur une promesse.
• fetch() est une API de bas niveau. Ainsi, il offre un contrôle plus fin.

Inconvénients de fetch()

• Fonctionnalités intégrées limitées pour la gestion des erreurs et le délai d'attente des demandes par rapport à Axios.
• Code détaillé pour les tâches courantes.

Différences entre Axios et fetch()

Puisque vous comprenez maintenant ce que sont Axios et fetch(), comparons et contrastons certaines fonctionnalités clés de ces deux-là avec des exemples de code.

Syntaxe de base

En ce qui concerne la syntaxe, Axios propose une syntaxe plus compacte et plus conviviale pour les développeurs que fetch().

Requête POST simple avec Axios :

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

Demande POST similaire avec fetch() :

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2>Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});

C'est assez visible car même si fetch() est léger, il nécessite toujours plus de travail manuel pour effectuer certaines tâches courantes. Par exemple, Axios est livré avec une analyse JSON automatique et peut accéder directement à l'objet de données de la réponse. En revanche, dans fetch(), vous devez analyser manuellement la réponse au format JSON. Bien que les deux approches présentées produisent des résultats similaires, vous devez gérer explicitement les erreurs, les sérialisations et les en-têtes dans fetch().

Gestion des erreurs

La gestion des erreurs est quelque chose que les développeurs rencontrent presque tous les jours. Axios, par exemple, traite par défaut tout appel HTTP avec un code d'état en dehors de la plage 2xx. Il vous donne un objet explicatif utile pour gérer et déboguer vos erreurs.

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});

fetch() ne traite pas automatiquement les erreurs HTTP (codes d'état 4xx ou 5xx) comme des erreurs. Vous devez effectuer des vérifications conditionnelles manuellement pour identifier l'état de la réponse afin de capturer l'erreur. Mais vous pouvez avoir une logique personnalisée de gestion des erreurs au sein de votre projet pour collecter des informations et gérer les erreurs comme le fait Axios.

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

Compatibilité descendante avec les navigateurs

Si vous avez besoin d'une compatibilité avec des dépendances héritées, telles qu'un navigateur plus ancien comme Internet Explorer (IE11) ou des versions plus anciennes de la plupart des navigateurs modernes, votre solution privilégiée est Axios.

fetch() est natif des navigateurs modernes et fonctionne parfaitement avec eux. Cependant, il ne prend pas en charge certaines anciennes versions de navigateur. Vous pouvez toujours l'utiliser avec des polyfills comme whatwg-fetch pour le faire fonctionner dans les navigateurs qui n'utilisent pas fetch(). Il est important de noter que l'utilisation de polyfills peut cependant augmenter la taille de votre bundle et affecter les performances.

!(https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Fetch-compatibility.png)

Intercepteurs HTTP

Les intercepteurs HTTP permettent d'intercepter les requêtes et les réponses et s'avèrent utiles lorsque :

• Modification des requêtes (par exemple, lors de l'ajout d'une authentification aux en-têtes).
• Transformation des réponses (prétraitement des données de réponse).
• Gestion des erreurs à l'échelle mondiale (enregistrement et redirection en cas de rencontre d'un 401 non autorisé).

Cette fonctionnalité puissante est prête à l'emploi avec Axios mais n'est pas supportée nativement par fetch().

Ajout d'un jeton d'authentification aux requêtes avec Axios :

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

Cependant, cela ne signifie pas que fetch() ne peut pas effectuer d'interception HTTP. Vous pouvez utiliser un middleware pour écrire manuellement un wrapper personnalisé afin d'imiter ce comportement.

Ajout d'un jeton d'authentification aux requêtes avec le wrapper fetch() :

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2>Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});

Délai de réponse

Le délai d'attente de réponse fait référence au temps pendant lequel un client attendra que le serveur réponde. Si ce délai est dépassé, la demande est considérée comme infructueuse. Axios et fetch() prennent en charge les délais d'attente des requêtes, essentiels lorsqu'il s'agit de réseaux peu fiables ou lents. Néanmoins, Axios prend les devants en proposant une approche plus simple de la gestion des temps morts.

Un time-out de demande avec Axios :

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});

Un délai d'attente de requête avec fetch() :

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

Axios gère les délais d'attente plus simplement et plus gracieusement avec un code plus propre grâce à son option de délai d'attente. Mais fetch() nécessite une gestion manuelle du délai d'attente avec AbortController(), ce qui vous donne plus de contrôle sur comment et quand la requête est abandonnée.

Référence GitHub

Pour plus de détails, reportez-vous aux exemples complets d'Axios vs. Fetch sur le référentiel GitHub.

Conclusion

Comme de nombreux outils, Axios et l'API Fetch présentent des forces et des faiblesses. Si vous avez besoin d'une analyse automatique de JSON, d'une gestion intégrée des erreurs et d'intercepteurs pour rationaliser les processus compliqués, optez pour Axios. Choisissez fetch() si vous souhaitez une interface pure et simple qui convient le mieux aux environnements de navigateur modernes et ne nécessite pas de bibliothèque externe. En bref, les deux fonctionnent bien, mais ils sont adaptés à différents niveaux de complexité et d'exigences de fonctionnalités.

Blogs connexes

• 5 meilleures pratiques pour gérer les erreurs HTTP en JavaScript
• Top 5 des extensions Chrome pour le traitement des requêtes HTTP
• Comment migrer les gestionnaires et modules HTTP ASP.NET vers le middleware ASP.NET Core
• Gérer efficacement les actions CRUD dans Syncfusion ASP.NET MVC DataGrid avec demande de récupération

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!