In diesem Artikel erfahren Sie, wie Sie die Axios- Bibliothek in React verwenden.
Schauen wir uns alles am Beispiel von Anforderungen an den Server an, zeigen die empfangenen Daten in einer Tabelle an, übergeben die Lastprüfungskomponente und all dies mithilfe von React Hooks.
Was ist Axios?
Axios ist einer der beliebtesten HTTP-Clients für Browser und versprechungsbasierte node.js.
Axios unterstützt Anforderungen, empfängt Antworten vom Server, transformiert sie und konvertiert sie automatisch in JSON.
Bevor wir beginnen, erstellen wir ein neues React-Projekt:
npx create-react-app react-axios-tableLassen Sie uns darauf eingehen:
cd react-axios-tableProjektdaten
Wir werden eine Reihe von Objekten als Daten für unser Projekt verwenden:
[
{
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...',
}
]Link zu Daten
Konfigurieren einer Komponente für die Arbeit mit Axios
Laden Sie die Axios-Bibliothek:
npm i axiosWir importieren Axios in die Komponente, von der wir Anforderungen an den Server senden:
import axios from 'axios'weil Im Projekt verwenden wir React Hooks, importieren useState und useEffect (lesen Sie mehr über Hooks in der Reaktion hier ):
import React, { useEffect, useState } from 'react';Fügen Sie als Nächstes den folgenden Code zur Komponente hinzu:
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;Schauen wir uns den Code genauer an:
const [appState, setAppState] = useState();Verantwortlich für den Zustand des Staates in der Komponente:
useEffect(() => {}, [setAppState])useEffect überwacht die Änderungen von setAppState und rendert bei Bedarf erneut
const apiUrl=''Wir ersetzen unseren Link hier
axios.get(apiUrl).then((resp) => {
const allPersons = resp.data;
setAppState(allPersons);
});Senden Sie eine Get- Anfrage an den Server und speichern Sie die empfangenen JSON- Daten im Status
Check-Komponente herunterladen
Erstellen Sie einen Komponentenordner in src . Erstellen Sie darin die Komponente UserData.js und fügen Sie den folgenden Code hinzu:
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 UserDataWir übertragen die vom Server empfangenen Daten an die Requisiten der Komponente.
if (!persons || persons.length === 0) return <p> .</p>Überprüfen Sie, ob Daten vom Server vorhanden sind
{
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>
)
}Mit der Map- Methode gehen wir das Array mit Personen durch und erstellen für jede Person eine Zeichenfolge. Schlüssel nicht vergessen . Erstellen Sie
im Komponentenordner LoadingPersonsData.js und fügen Sie den folgenden Code ein:
function OnLoadingUserData(Component) {
return function LoadingPersonsData({ isLoading, ...props }) {
if (!isLoading) return <Component {...props} />
else return (
<div>
<h1>, !</h1>
</div>
)
}
}
export default LoadingPersonsDataDer obige Code ist eine Komponente höherer Ordnung in React. Es nimmt eine andere Komponente als Requisiten und gibt dann eine Logik zurück. In unserem Fall überprüft die Komponente isLoading . Während die Daten geladen werden, wird die Lademeldung angezeigt. Sobald isLoading false ist, geben wir die Komponente mit den Daten zurück.
Nehmen Sie Änderungen an unserer App.js vor, um das Laden der Daten zu überprüfen.
Importieren wir unsere Komponenten in App.js :
import UserData from './components/UserData'
import OnLoadingUserData from './components/OnLoadingUserData'Fügen Sie den folgenden Code hinzu:
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);Wir erstellen eine neue Komponente, setzen sie unserer übergeordneten Komponente gleich und umschließen sie mit UserData (Datenanzeigekomponente).
Wir fügen dem Status eine neue Eigenschaft beim Laden hinzu: false , anhand derer wir das Laden von Daten vom Server bestimmen.
<DataLoading isLoading={appState.loading} persons={appState.persons} />Rendern Sie die Komponente und übergeben Sie die Requisiten an unsere Komponente höherer Ordnung. Fügen wir
etwas CSS hinzu und beim Laden der Daten wird das folgende Fenster angezeigt:
Wenn die Abrufanforderung an den Server erfolgreich abgeschlossen wurde, werden die Daten empfangen:
Jetzt wissen wir, wie Axios get mit der REST-API verwendet wird.
Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie diese in den Kommentaren. Ich werde gerne antworten.