Dans cet article, vous apprendrez à utiliser la bibliothèque Axios dans React.
Regardons tout en utilisant l'exemple des requêtes au serveur, affichons les données reçues dans une table, remettons le composant du vérificateur de chargement, et tout cela en utilisant React Hooks.
Qu'est-ce qu'Axios?
Axios est l'un des clients HTTP les plus populaires pour les navigateurs et les nœuds basés sur des promesses.
Axios prend en charge les requêtes, reçoit les réponses du serveur, les transforme et les convertit automatiquement en JSON.
Avant de commencer, créons un nouveau projet React:
npx create-react-app react-axios-tableAllons-y:
cd react-axios-tableDonnées du projet
Nous utiliserons un tableau d'objets comme données pour notre projet:
[
{
id: 101,
firstName: 'Sue',
lastName: 'Corson',
email: 'DWhalley@in.gov',
phone: '(612)211-6296',
address: {
streetAddress: '9792 Mattis Ct',
city: 'Waukesha',
state: 'WI',
zip: '22178'
},
description: 'et lacus magna dolor...',
}
]Lien vers les données
Configurer un composant pour qu'il fonctionne avec Axios
Chargez la bibliothèque Axios:
npm i axiosNous importons des axios dans le composant à partir duquel nous enverrons des requêtes au serveur:
import axios from 'axios'Parce que dans le projet, nous utilisons React Hooks, importons useState et useEffect (en savoir plus sur les hooks dans le react ici ):
import React, { useEffect, useState } from 'react';Ensuite, ajoutez le code suivant au composant:
function App() {
const [appState, setAppState] = useState();
useEffect(() => {
const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}';
axios.get(apiUrl).then((resp) => {
const allPersons = resp.data;
setAppState(allPersons);
});
}, [setAppState]);
return (
<div className="app">
</div>
);
}
export default App;Regardons de plus près le code:
const [appState, setAppState] = useState();Responsable de l'état de l'état du composant:
useEffect(() => {}, [setAppState])useEffect surveillera les changements dans setAppState et effectuera un nouveau rendu si nécessaire
const apiUrl=''nous substituons notre lien ici
axios.get(apiUrl).then((resp) => {
const allPersons = resp.data;
setAppState(allPersons);
});envoyer une requête get au serveur, puis enregistrer les données JSON reçues dans l'état
Télécharger le composant de vérification
Créez un dossier de composants dans src . Dans celui-ci, créez le composant UserData.js et ajoutez le code suivant:
function UserData(props) {
const { persons } = props
if (!persons || persons.length === 0) return <p> .</p>
return (
<div>
<table>
<thead>
<tr>
<th>id</th>
<th>firstName</th>
<th>lastName</th>
<th>email</th>
<th>phone</th>
</tr>
</thead>
<tbody>
{
persons.map((person) =>
<tr key={person.id}>
<td>{person.id}</td>
<td>{person.firstName}</td>
<td>{person.lastName}</td>
<td>{person.email}</td>
<td>{person.phone}</td>
</tr>
)
}
</tbody>
</table>
</div>
)
}
export default UserDataNous transférerons les données reçues du serveur vers les accessoires du composant.
if (!persons || persons.length === 0) return <p> .</p>vérifier s'il y a des données du serveur
{
persons.map((person) =>
<tr key={person.id}>
<td>{person.id}</td>
<td>{person.firstName}</td>
<td>{person.lastName}</td>
<td>{person.email}</td>
<td>{person.phone}</td>
</tr>
)
}En utilisant la méthode map , nous parcourons le tableau avec des personnes, créons une chaîne pour chaque personne. N'oubliez pas la clé .
Dans le dossier des composants , créez LoadingPersonsData.js et collez le code suivant:
function OnLoadingUserData(Component) {
return function LoadingPersonsData({ isLoading, ...props }) {
if (!isLoading) return <Component {...props} />
else return (
<div>
<h1>, !</h1>
</div>
)
}
}
export default LoadingPersonsDataLe code ci-dessus est un composant d'ordre supérieur dans React. Il prend un autre composant comme accessoire et retourne ensuite une certaine logique. Dans notre cas, le composant vérifie isLoading . Pendant le chargement des données, nous affichons le message de chargement, dès que isLoading est faux, nous retournons le composant avec les données. Modifions
notre App.js pour pouvoir vérifier le chargement des données. Importons
nos composants dans App.js :
import UserData from './components/UserData'
import OnLoadingUserData from './components/OnLoadingUserData'Ajoutez le code suivant:
function App() {
const DataLoading = LoadingPersonsData(UserData);
const [appState, setAppState] = useState(
{
loading: false,
persons: null,
}
)
useEffect(() => {
setAppState({loading: true})
const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}';
axios.get(apiUrl).then((resp) => {
const allPersons = resp.data;
setAppState({
loading: false,
persons: allPersons
});
});
}, [setAppState]);
return (
<div className="app">
<DataLoading isLoading={appState.loading} persons={appState.persons} />
</div>
);
}
export default App;
const DataLoading = LoadingPersonsData(UserData);Nous créons un nouveau composant, l'assimilons à notre composant d'ordre supérieur et enveloppons un UserData (composant d'affichage de données) avec lui.
Nous ajoutons une nouvelle propriété loading: false à l'état , par lequel nous déterminerons le chargement des données depuis le serveur.
<DataLoading isLoading={appState.loading} persons={appState.persons} />Rendez le composant et passez les accessoires à notre composant d'ordre supérieur.
Ajoutons quelques css et lors du chargement des données, nous verrons la fenêtre suivante:
Et maintenant, lorsque la requête get au serveur est terminée avec succès, les données sont reçues:
nous savons maintenant comment utiliser Axios get avec l'API REST.
Si vous avez des questions ou des suggestions, laissez-les dans les commentaires. Je serai heureux de répondre.