Axios vs Fetch : quel est le meilleur pour les requêtes HTTP ?

Il existe de nombreuses façons d'effectuer des requêtes HTTP en JavaScript, mais deux des plus populaires sont Axios et l'API native fetch(). Dans cet article, nous comparerons et opposerons ces deux méthodes pour déterminer laquelle est la mieux adaptée à différents scénarios.

Rôle essentiel des requêtes HTTP

Les requêtes HTTP sont fondamentales pour communiquer avec les serveurs et les API des applications Web. Axios et fetch() sont largement utilisés pour faciliter efficacement ces requêtes. Examinons leurs fonctionnalités et voyons comment elles se comparent.

Qu’est-ce qu’Axios ?

Axios est une bibliothèque tierce qui fournit un client HTTP basé sur des promesses pour effectuer des requêtes HTTP. Il est connu pour sa simplicité et sa flexibilité et est largement utilisé dans la communauté JavaScript.

Syntaxe de base d'Axios

axios(config)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Principales caractéristiques d'Axios :

• Flexibilité de configuration : Accepte à la fois une URL et un objet de configuration.
• Gestion automatique des données : Convertit automatiquement les données vers et depuis JSON.
• Gestion des erreurs : Gère automatiquement les codes d'état d'erreur HTTP, en les transmettant au bloc catch.
• Réponse simplifiée : Renvoie les données du serveur directement dans la propriété data de l'objet de réponse.
• Gestion simplifiée des erreurs : Fournit un mécanisme de gestion des erreurs plus rationalisé.

Exemple:

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: { key: 'value' }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('Server responded with:', error.response.status);
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Error:', error.message);
    }
  });

Pourquoi utiliser Axios ?

• Transformation automatique des données JSON : Convertit les données vers et depuis JSON de manière transparente.
• Délai d'expiration de la réponse : Permet de définir un délai d'expiration pour les requêtes.
• Intercepteurs HTTP : Vous permet d'intercepter les requêtes et les réponses.
• Progression du téléchargement : Suit la progression des téléchargements et des mises en ligne.
• Demandes simultanées : Gère plusieurs demandes simultanément et combine les réponses.

Qu’est-ce que Récupérer ?

fetch() est une API intégrée en JavaScript moderne, prise en charge par tous les navigateurs modernes. Il s'agit d'une API Web asynchrone qui renvoie des données sous forme de promesses.

Caractéristiques de fetch() :

• Syntaxe de base : Simple et concis, prend une URL et un objet d'options facultatif.
• Compatibilité descendante : Peut être utilisé dans les anciens navigateurs avec des polyfills.
• Personnalisable : Permet un contrôle détaillé sur les en-têtes, le corps, la méthode, le mode, les informations d'identification, le cache, la redirection et les politiques de référencement.

Comment utiliser Axios pour effectuer des requêtes HTTP

Tout d'abord, installez Axios en utilisant npm ou Yarn :

axios(config)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Vous pouvez également inclure Axios via un CDN :

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: { key: 'value' }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('Server responded with:', error.response.status);
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Error:', error.message);
    }
  });

Voici comment utiliser Axios pour faire une requête GET :

npm install axios
# or
yarn add axios
# or
pnpm install axios

Faire des requêtes HTTP avec Fetch

Étant donné que fetch() est intégré, vous n'avez rien à installer. Voici comment faire une requête GET avec fetch() :

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Notez que :

• Gestion des données : Axios transforme automatiquement les données vers et depuis JSON, tandis qu'avec fetch() vous devez appeler manuellement réponse.json().
• Gestion des erreurs : Axios gère les erreurs dans le bloc catch, tandis que fetch() rejette uniquement la promesse sur les erreurs réseau, pas sur les erreurs d'état HTTP.

Syntaxe de base de Fetch

import axios from 'axios';

axios.get('https://example.com/api')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Principales caractéristiques :

• Arguments simples : Prend une URL et un objet de configuration facultatif.
• Traitement manuel des données : Nécessite une conversion manuelle des données en chaîne.
• Objet de réponse : Renvoie un objet de réponse contenant des informations de réponse complètes.
• Gestion des erreurs : Nécessite une vérification manuelle des codes d'état de réponse pour les erreurs HTTP.

Exemple:

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

Comparaison d'Axios et Fetch

Envoi de requêtes GET avec des paramètres de requête

Axios :

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Récupérer :

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => {
    if (!response.ok) throw new Error('HTTP error ' + response.status);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Envoi de requêtes POST avec un corps JSON

Axios :

axios.get('/api/data', { params: { name: 'Alice', age: 25 } })
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

Récupérer :

const url = new URL('/api/data');
url.searchParams.append('name', 'Alice');
url.searchParams.append('age', 25);

fetch(url)
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

Définition d'un délai d'expiration pour la demande

Axios :

axios.post('/api/data', { name: 'Bob', age: 30 })
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

Récupérer :

fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Bob', age: 30 })
})
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

Utilisation de la syntaxe async/await

Axios :

axios.get('/api/data', { timeout: 5000 }) // 5 seconds
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

Récupérer :

const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => controller.abort(), 5000); // abort after 5 seconds

fetch('/api/data', { signal })
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

Compatibilité descendante

Axios :

• Doit être installé et inclus dans votre projet.
• Prend en charge les anciens navigateurs avec des polyfills pour les promesses et d'autres fonctionnalités JavaScript modernes.
• Maintenu activement pour la compatibilité avec les nouveaux environnements.

Récupérer :

• Support natif dans les navigateurs modernes.
• Peut être polyrempli pour prendre en charge les anciens navigateurs.
• Mise à jour automatiquement par les fournisseurs de navigateurs.

Gestion des erreurs

Axios :

Gère les erreurs dans le bloc catch et considère tout code d'état en dehors de 2xx comme une erreur :

async function getData() {
  try {
    const response = await axios.get('/api/data');
    // handle response
  } catch (error) {
    // handle error
  }
}

Récupérer :

Nécessite une vérification manuelle de l'état :

async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // handle data
  } catch (error) {
    // handle error
  }
}

Axios vs Fetch : quel est le meilleur ?

Il n'y a pas de réponse définitive car cela dépend de vos besoins :

• Utilisez Axios si vous avez besoin de fonctionnalités telles que la transformation automatique des données JSON, les intercepteurs HTTP et la gestion avancée des erreurs.
• Utilisez fetch() si vous souhaitez une solution native et légère avec des options de personnalisation étendues.

Générer du code Axios/Fetch avec EchoAPI

EchoAPI est une plateforme de développement d'API collaborative tout-en-un offrant des outils pour concevoir, déboguer, tester et moquer des API. EchoAPI peut générer automatiquement du code Axios pour effectuer des requêtes HTTP.

Étapes pour générer du code Axios avec EchoAPI :

1. Ouvrez EchoAPI et créez une nouvelle requête.

2. Entrez le point de terminaison de l'API, les en-têtes et les paramètres, puis cliquez sur « Extrait de code ».

3. Sélectionnez "Générer le code client".

4. Copiez et collez le code Axios généré dans votre projet.

Conclusion

Axios et fetch() sont des méthodes puissantes pour effectuer des requêtes HTTP en JavaScript. Choisissez celui qui correspond le mieux aux besoins et aux préférences de votre projet. L'utilisation d'outils comme EchoAPI peut améliorer votre flux de travail de développement, garantissant que votre code est précis et efficace. Bon codage !

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!