FR
RU
EN
ES
ZH
DE
PT
AR
HI
Qu'est-ce qu'Axios et pourquoi en a-t-on besoin ?
\n\nAxios est une bibliothèque JavaScript puissante et populaire pour effectuer des requêtes HTTP. Elle fonctionne à la fois dans le navigateur et dans l'environnement Node.js, offrant une API unique et pratique basée sur Promise. Si vous devez envoyer une requête GET à une API, charger des données sur le serveur via POST ou traiter une réponse au format JSON, Axios le fait avec élégance et efficacité.
\n\nPourquoi utiliser Axios plutôt que le fetch intégré ou XMLHttpRequest ?
- \n
- Traitement automatique du JSON : Axios convertit automatiquement les réponses en JSON, vous évitant d'avoir à appeler
response.json(). \n - Intercepteurs (Interceptors) : Vous pouvez facilement ajouter une logique globale pour toutes les requêtes (par exemple, les jetons d'authentification) ou les réponses (par exemple, la gestion des erreurs). \n
- Annulation des requêtes : Prise en charge intégrée de l'annulation des requêtes via
AbortController. \n - Protection contre les CSRF : Gestion automatique des jetons XSRF pour améliorer la sécurité. \n
- Progression du chargement : Possibilité de suivre la progression de l'envoi et de la réception des données. \n
- Gestion pratique des erreurs : Messages d'erreur plus informatifs et possibilité de distinguer facilement les statuts des réponses. \n
- Prise en charge des anciens navigateurs : Contrairement à
fetch, Axios fonctionne dans Internet Explorer 11 et d'autres navigateurs obsolètes. \n
Installation
\n\nL'installation d'Axios dans un projet Node.js ou un projet frontend (via npm/yarn/pnpm) se fait avec une seule commande :
\n\n# Installation via npm (recommandée)\nnpm install axios\n\n# Installation via yarn\nyarn add axios\n\n# Installation via pnpm\npnpm add axios\nPour une utilisation dans le navigateur, vous pouvez également inclure Axios via un CDN :
\n\n<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>\nDémarrage rapide
\n\nAprès l'installation, vous pouvez immédiatement commencer à faire des requêtes. Voici un exemple simple d'une requête GET vers une API publique :
\n\n// Importation de la bibliothèque (pour Node.js ou les projets modulaires)\nimport axios from 'axios';\n\n// Effectuer une requête GET vers l'API JSONPlaceholder\naxios.get('https://jsonplaceholder.typicode.com/posts/1')\n .then(response => {\n console.log('Statut de la réponse :', response.status);\n console.log('Données :', response.data);\n })\n .catch(error => {\n console.error('Erreur de requête :', error.message);\n });\nCe code enverra une requête GET, recevra la réponse et affichera son statut ainsi que son corps (déjà automatiquement parsé du JSON en objet JavaScript).
\n\nMéthodes et fonctions principales
\n\nAxios fournit des méthodes d'encapsulation pratiques pour toutes les méthodes HTTP principales. Chacune d'elles retourne une Promise.
\n\n1. axios.get(url, config?)
\nCe qu'elle fait : Exécute une requête HTTP GET pour récupérer des données du serveur.
\nParamètres :
\n- \n
url(string) — URL de la requête. \n config(object, facultatif) — Objet de configuration Axios (par exemple,headers,paramspour la chaîne de requête,timeout). \n
Exemple :
\n// Requête avec paramètres de requête\naxios.get('https://api.example.com/users', {\n params: {\n page: 2,\n limit: 10\n },\n headers: {\n 'Authorization': 'Bearer my-token'\n }\n})\n.then(response => {\n console.log(response.data);\n});\n2. axios.post(url, data?, config?)
\nCe qu'elle fait : Exécute une requête HTTP POST pour envoyer des données au serveur (généralement pour créer une nouvelle ressource).
\n<
