Lisez le code lentement et suivez le flux d'informations et le format des informations si nécessaire, à mesure qu'ils changent

Aperçu

Axios est une bibliothèque JavaScript populaire utilisée pour effectuer des requêtes HTTP à partir du navigateur et de Node.js. Il s'agit d'un projet open source conçu pour simplifier le processus d'envoi de requêtes HTTP asynchrones aux points de terminaison REST et d'exécution d'opérations CRUD (Créer, Lire, Mettre à jour, Supprimer).

Créateur

Axios a été créé par Matt Zabriskie. Le projet est maintenu par la communauté et est disponible sur GitHub.

Les bénéficiaires

Axios est bénéfique pour :

• Développeurs front-end : pour effectuer des requêtes HTTP à partir d'applications Web.
• Développeurs back-end : pour intégrer les requêtes HTTP dans les applications Node.js.
• Développeurs full-stack : pour gérer les requêtes HTTP côté client et côté serveur.

Avantages

1. Basé sur des promesses : facilite le travail avec des requêtes et des réponses asynchrones.
2. Intercepteurs : permet de modifier les demandes ou les réponses avant qu'elles ne soient traitées.
3. Transformation automatique des données JSON : simplifie la gestion des données JSON.
4. Protection CSRF : aide à la protection contre la falsification des requêtes intersites.
5. Transformation des demandes et des réponses : transformation personnalisée des demandes et des réponses.
6. Gestion des erreurs : gestion des erreurs simplifiée par rapport aux autres méthodes.
7. Prise en charge étendue du navigateur : fonctionne dans tous les navigateurs modernes et Node.js.

Usage

Où il est utilisé

• Applications Web : pour communiquer avec les services back-end.
• Applications Node.js : pour effectuer des requêtes HTTP vers d'autres API ou services.
• Applications mobiles : dans le cadre de frameworks comme React Native.

Là où ça échoue

1. Applications lourdes : peut ne pas être la meilleure solution pour les transferts de données très volumineux en raison de la consommation de mémoire.
2. Limites du navigateur : soumis aux restrictions de la politique de même origine, sauf si CORS est correctement géré.
3. Taille de la dépendance : Dépendance supplémentaire à gérer, ce qui pourrait être un problème pour les projets minimalistes.

Pourquoi est-il utilisé

• Facilité d'utilisation : API simple pour effectuer des requêtes HTTP.
• Flexibilité : facilement configurable et extensible.
• Soutien de la communauté : large adoption et soutien communautaire étendu.

Pourquoi il ne serait pas utilisé

• Taille de la bibliothèque : surcharge liée à l'ajout d'une autre dépendance.
• Alternatives : préférence pour l'API Fetch ou d'autres bibliothèques comme request ou superagent.

Comment il est utilisé

Installation

npm install axios

Utilisation de base

const axios = require('axios');

// Performing a GET request
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Utilisation détaillée avec commentaires

const axios = require('axios');

// Create an instance of axios with default settings
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
});

// Interceptor to log request details
instance.interceptors.request.use(request => {
  console.log('Starting Request', request);
  return request;
});

// Interceptor to log response details
instance.interceptors.response.use(response => {
  console.log('Response:', response);
  return response;
});

// Making a POST request
instance.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
  .then(response => {
    console.log('User created:', response.data);
  })
  .catch(error => {
    console.error('Error creating user:', error);
  });

Exemples d'utilisation abusive

1. Ignorer la gestion des erreurs : une mauvaise gestion des erreurs peut entraîner des plantages de l'application.

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  });
// Error handling should not be omitted

1. Code de blocage avec des requêtes synchrones : Axios ne prend pas en charge les requêtes synchrones, son utilisation d'une manière qui s'attend à un comportement synchrone est incorrecte.

Méthodes

Méthodes d'instance

• axios(config)
• axios(url[, config])

Méthodes de demande

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

Méthodes pratiques

• axios.all (itérable)
• axios.spread(rappel)

Création d'instances

• axios.create([config])

Intercepteurs

• axios.interceptors.request.use(onFulfilled[, onRejected[, options]])
• axios.interceptors.response.use(onFulfilled[, onRejected[, options]])

Paramètres par défaut de la configuration

• axios.defaults

Annuler

• axios.Annuler
• axios.CancelToken
• axios.isAnnuler

Conclusion

Axios est une bibliothèque robuste et facile à utiliser pour effectuer des requêtes HTTP dans les applications JavaScript. Il fournit une API puissante avec des fonctionnalités telles que l'interception des requêtes et des réponses, la transformation JSON automatique et une architecture basée sur les promesses. Cependant, il est essentiel de comprendre ses limites et de l'utiliser de manière appropriée pour éviter les pièges potentiels.