Axios est une bibliothèque JavaScript très populaire que vous pouvez utiliser pour effectuer des requêtes HTTP. Elle peut être utilisée autant sur des navigateurs que sur node.js. C’est une excellente bibliothèque pour React.js, car elle prend en charge les promesses et rend facile le traitement des requêtes HTTP. Voici quelques étapes de base pour l’utiliser avec React :
1. Installation: Vous pouvez installer Axios en utilisant npm ou yarn :
\`\`\` npm install axios \`\`\` ou \`\`\` yarn add axios \`\`\`1. Importation: Une fois installé, vous pouvez l’importer dans vos fichiers .js ou .jsx en utilisant l’instruction import, par exemple :
\`\`\`javascript import axios from ‘axios’; \`\`\`1. Utilisation: Vous pouvez maintenant utiliser axios pour effectuer des requêtes GET, POST, etc. Par exemple, si vous voulez charger des données à partir d’un API, vous pouvez utiliser la méthode get :
\`\`\`javascript axios.get(‘https://api.example.com/data’) .then(response => { console.log(response.data); }) .catch(error => { console.error(‘There was an error!’, error); }); \`\`\` Pour une requête POST, vous pouvez utiliser la méthode post : \`\`\`javascript axios.post(‘https://api.example.com/data’, { item: ‘example data’ }) .then(response => { console.log(response.data); }) .catch(error => { console.error(‘There was an error!’, error); }); \`\`\` Axios vous permet également d’intercepter les requêtes ou réponses avant qu’elles ne soient traitées, d’annuler des requêtes et de transformer automatiquement les données JSON.1. Utilisation avec les hooks de React: Vous pouvez utiliser les hooks pour effectuer une requête lorsqu’un composant est monté :
\`\`\`javascript import React, { useState, useEffect } from ‘react’; import axios from ‘axios’; function DataFetcher(){ const [data, setData] = useState([]); useEffect(() => { axios.get(‘https://api.example.com/data’) .then(response => { setData(response.data) }) }, []); // Le tableau vide signifie que l’effet s’exécute une fois – après le premier render return (