Bibliothèque JavaScript populaire, Axios est devenue un incontournable du développement Web moderne, en particulier lors du traitement des requêtes HTTP dans les applications React. Ce blog explorera les tenants et les aboutissants de l’utilisation d’Axios avec React, en fournissant un guide complet et des exemples de code pratiques pour améliorer votre compréhension.
Premiers pas avec Axios dans React
Installation
Étape 1 : Création d’une application React
Exécutez la commande donnée pour créer une nouvelle application React.
Note: Si vous avez déjà créé l’application React, vous pouvez ignorer cette étape et suivre directement les 2sd étape.
npx créer-réagir-app mon-axios-app
cd mon-axios-app
npm démarrer
Étape 2 : Installation d’Axios
Maintenant, installez Axios dans votre projet en exécutant :
npm installer axios
Faire des requêtes GET
Requête GET de base
Commençons notre exploration par un aspect fondamental : faire une simple requête GET. Créez un nouveau fichier nommé getExample.js au sein d’un « Axios » dossier dans votre projet React et ajoutez le code suivant :
getExample.js
// Import Axios
import axios from "axios";
// Make a GET request
const fetchData = async () => {
try {
const response = await axios.get(
"https://jsonplaceholder.typicode.com/posts/1"
);
console.log("Data fetched:", response.data);
} catch (error) {
console.error("Error fetching data:", error);
}
};
// Export the function for use in other files
export default fetchData;
Dans ce getExample.js déposer, « Axios » est importé pour gérer les requêtes HTTP. Le ‘récupérer les données’ La fonction, définie comme une opération asynchrone, utilise Axios pour demander un GET à une URL spécifiée. En cas de demande réussie, les données récupérées sont enregistrées sur la console. Toutes les erreurs rencontrées lors de la demande sont également détectées et enregistrées.
Importer le ‘récupérer les données’ fonctionner dans le App.js composant pour récupérer les données de l’API.
App.js
import React, { useEffect } from "react";
import fetchData from "./axios/getExample";
const App = () => {
useEffect(() => {
fetchData();
}, []);
return (
<div>
<h2>Mastering Axios in React: A Complete Overview</h2>
<p>Basic GET request: </p>
</div>
);
};
export default App;
Sortir
Gestion de l’asynchrone/de l’attente
Pour améliorer la lisibilité du code, nous pouvons utiliser le asynchrone/attendre syntaxe. Créez un autre fichier nommé asyncAwaitExample.js au sein d’un « Axios » dossier dans votre projet React et ajoutez le code suivant :
asyncAwaitExample.js
// Import Axios
import axios from "axios";
// Make an asynchronous request using async/await
const fetchDataAsync = async () => {
try {
const response = await axios.get(
"https://jsonplaceholder.typicode.com/posts/1"
);
console.log("Data fetched asynchronously:", response.data);
} catch (error) {
console.error("Error fetching data:", error);
}
};
// Export the function for use in other files
export default fetchDataAsync;
Dans ce asyncAwaitExample.js fichier, nous importons Axios pour gérer les requêtes HTTP. Le ‘fetchDataAsync’ La fonction est définie comme une opération asynchrone utilisant le asynchrone/attendre syntaxe. Axios envoie une requête GET à une URL spécifiée dans un essayez de bloquer. Les données récupérées sont enregistrées sur la console une fois l’opération réussie avec un message indiquant une récupération asynchrone. Toutes les erreurs rencontrées lors de la requête sont détectées dans le bloc catch et enregistrées sur la console.
Importer le ‘fetchDataAsync’ fonctionner dans le App.js composant pour récupérer les données de manière asynchrone à l’aide de async/await.
App.js
import React, { useEffect } from "react";
import fetchDataAsync from "./axios/asyncAwaitExample";
const App = () => {
useEffect(() => {
fetchDataAsync();
}, []);
return (
<div>
<h2>Mastering Axios in React: A Complete Overview</h2>
<p>Handling Async/Await GET Request: </p>
</div>
);
};
export default App;
Sortir
Faire des requêtes POST
Pour créer une fonctionnalité de requête POST, créez d’abord un nouveau fichier nommé postExample.js au sein d’un « Axios » dossier dans votre projet React et ajoutez le code suivant :
postExample.js
import axios from "axios";
const postData = async (data) => {
try {
const response = await axios.post(
"https://jsonplaceholder.typicode.com/posts",
data
);
console.log("Data posted:", response.data);
} catch (error) {
console.error("Error posting data:", error);
}
};
export default postData;
Dans ce postExample.js fichier, nous définissons une fonction ‘postdater’ qui utilise le ‘Axios.post’ méthode, une fonction d’Axios utilisée pour envoyer des données à un serveur via Internet. Il nécessite l’adresse du serveur (URL) et les données que vous souhaitez envoyer. Il gère le processus d’envoi de données et fournit des messages d’erreur en cas de problème. Cette méthode facilite l’interaction avec les API et la transmission des données de votre application React vers un serveur.
Importer le ‘postdater’ fonctionner dans le App.js composant pour envoyer des données via une requête POST.
App.js
import React, { useState } from "react";
import postData from "./axios/postExample";
function App() {
const [data, setData] = useState({ title: "", body: "" });
const handlePost = (e) => {
e.preventDefault();
postData({ ...data, userId: 1 });
};
return (
<div>
<h1>Mastering Axios in React: A Complete Overview</h1>
<h4>Making POST Requests: </h4>
<form onSubmit={handlePost}>
<label>
Title:
<input
type="text"
value={data.title}
onChange={(e) => setData({ ...data, title: e.target.value })}
/>
</label>
<br />
<label>
Body:
<textarea
value={data.body}
onChange={(e) => setData({ ...data, body: e.target.value })}
/>
</label>
<br />
<input type="submit" />
</form>
</div>
);
}
export default App;
Dans App.jsl’État gère les données de poste à l’aide du ‘état d’utilisation’ crochet. Lors de la soumission du formulaire, le ‘handlePost’ La fonction empêche l’action par défaut et envoie les données de publication à l’aide d’Axios via ‘postdater’ depuis postExample.js. Les utilisateurs peuvent saisir le titre et le corps du message via des champs de saisie et un zone de texte élément. Ce composant simplifie la soumission des données de publication, montrant comment Axios peut gérer les requêtes POST dans les applications React.
Sortir
Techniques avancées avec Axios
Configuration des paramètres globaux par défaut
Axios vous permet de définir des paramètres de configuration globale par défaut, ce qui facilite la gestion des en-têtes et des URL de base. Créez un nouveau fichier nommé global.js au sein d’un « Axios » dossier dans votre projet React et ajoutez le code suivant :
global.js
// Import Axios import axios from "axios"; // Set global configuration defaults axios.defaults.headers.common["Authorization"] = "Bearer TEST_GLOBAl_DEFAULTS"; axios.defaults.headers.common["Accept"] = "application/json"; axios.defaults.baseURL = "https://jsonplaceholder.typicode.com";
Dans ce global.js fichier, nous définissons des en-têtes standard comme l’autorisation, acceptons les en-têtes et spécifions une URL de base pour toutes les demandes.
Pour intégrer ces valeurs par défaut globales dans nos composants React, nous importons simplement le global.js déposer dans notre App.js composant:
App.js
import React, { useEffect } from "react";
import axios from "axios";
import "./axios/global";
function App() {
const fetchData = async () => {
try {
const response = await axios.get("/posts/1");
console.log("Data fetched:", response.data);
} catch (error) {
console.error("Error fetching data:", error);
}
};
useEffect(() => {
fetchData();
});
return (
<div>
<h1>Mastering Axios in React: A Complete Overview</h1>
<h4>Configuring Global Defaults: </h4>
</div>
);
}
export default App;
Dans ce App.js fichier, nous importons Axios et global.js pour définir les configurations par défaut. Nous définissons un ‘récupérer les données’ fonction pour récupérer des données à partir d’un point de terminaison d’API à l’aide d’Axios. Le ‘utiliserEffet’ le crochet assure ‘récupérer les données’ est appelé lorsque le composant est monté. Si les données sont récupérées avec succès, nous les enregistrons ; si une erreur se produit, nous enregistrons l’erreur.
Sortir
Instance Axios personnalisée
Les instances Axios personnalisées permettent aux développeurs de créer des instances spécialisées d’Axios avec des configurations uniques adaptées à des besoins spécifiques. Cela signifie que vous pouvez définir des paramètres personnalisés, tels que des URL de base, des en-têtes et des intercepteurs, pour différentes parties de votre application sans affecter la configuration globale d’Axios. Créez un fichier nommé personnaliséInstance.js et ajoutez le code suivant :
personnaliséInstance.js
import axios from "axios";
const customAxios = axios.create({
baseURL: "https://jsonplaceholder.typicode.com",
headers: {
Authorization: "Bearer TEST_CUSTOM_AXIOS",
Accept: "application/json",
},
});
export default customAxios;
Dans le personnaliséInstance.js fichier, nous créons une instance Axios personnalisée. Cette instance est créée à l’aide du ‘Axios.créer’ et définit une URL de base et des en-têtes personnalisés, y compris l’autorisation et le type de contenu. Cela nous permet d’interagir avec l’API de manière contrôlée.
Importez l’instance Axios personnalisée depuis personnaliséInstance.js dans le App.js composant pour faire des requêtes avec des configurations personnalisées.
App.js
import React, { useEffect } from "react";
import customInstance from "./axios/customAxios";
function App() {
const fetchData = async () => {
try {
const response = await customInstance("/posts/2");
console.log("Data fetched:", response.data);
} catch (error) {
console.error("Error fetching data:", error);
}
};
useEffect(() => {
fetchData();
});
return (
<div>
<h1>Mastering Axios in React: A Complete Overview</h1>
<h4>Custom Axios Instance: </h4>
</div>
);
}
export default App;
Sortir
Intercepteurs
Les intercepteurs jouent un rôle essentiel dans l’interception et la modification des requêtes et des réponses HTTP dans Axios. Ils fournissent un mécanisme puissant pour gérer le cycle de vie des demandes et des réponses, permettant aux développeurs d’ajouter une logique personnalisée, telle que la journalisation, la gestion des erreurs et l’authentification, avant d’envoyer des demandes ou après avoir reçu des réponses. Créez un fichier nommé intercepteurs.js et ajoutez le code suivant :
intercepteurs.js
import axios from "axios";
const createInstance = axios.create({
baseURL: "https://jsonplaceholder.typicode.com",
});
createInstance.interceptors.request.use(
(request) => {
console.log("Request sent:", request);
return request;
},
(error) => {
console.error("Error in request interceptor:", error);
return Promise.reject(error);
}
);
createInstance.interceptors.response.use(
(response) => {
console.log("Response received:", response);
return response;
},
(error) => {
console.error("Error in response interceptor:", error);
return Promise.reject(error);
}
);
export default createInstance;
Dans ce intercepteurs.js fichier, nous avons deux intercepteurs : un pour gérer les requêtes et un autre pour gérer les réponses. Ces intercepteurs sont créés à l’aide du Axios.interceptors.request.use et Axios.interceptors.response.use méthodes, respectivement. Ces méthodes nous permettent d’intercepter les requêtes et réponses HTTP effectuées par Axios avant qu’elles ne soient envoyées ou reçues par le serveur, nous permettant d’ajouter une logique personnalisée ou de modifier les données.
Importer intercepteurs.js pour configurer des intercepteurs de requêtes et de réponses pour Axios dans le App.js composant.
App.js
import React, { useEffect } from "react";
import createInstance from "./axios/interceptors";
function App() {
const fetchData = async () => {
try {
const response = await createInstance("/posts/3");
console.log("Data fetched:", response.data);
} catch (error) {
console.error("Error fetching data:", error);
}
};
useEffect(() => {
fetchData();
});
return (
<div>
<h1>Mastering Axios in React: A Complete Overview</h1>
<h4>Interceptors: </h4>
</div>
);
}
export default App;
Dans ce App.js fichier, nous avons un récupérer les données fonction responsable de la récupération des données à partir du point de terminaison de l’API ‘/posts/3’ en utilisant notre instance Axios personnalisée créer une instance et en utilisant le ‘utiliserEffet’ crochet pour garantir que le ‘récupérer les données’ La fonction est appelée lorsque le composant est monté. Ce crochet exécute le ‘récupérer les données’ fonction une fois que l’élément est rendu à l’écran.
Sortir
Conclusion
Toutes nos félicitations! Vous avez configuré avec succès Axios dans une application React, effectué une requête GET de base et exploré des techniques avancées telles que la configuration des valeurs par défaut globales, l’utilisation d’instances personnalisées et la mise en œuvre d’intercepteurs. Ces techniques sont essentielles pour les applications du monde réel, offrant flexibilité, maintenabilité et une approche centralisée de la gestion des requêtes HTTP. Tout en poursuivant votre voyage, explorez des fonctionnalités supplémentaires d’Axios et adaptez-les pour répondre aux besoins spécifiques de vos projets.
Source link