Viele Web-Apps stehen an einem bestimmten Punkt ihrer Entwicklung vor der Notwendigkeit, eine Schnittstelle zu einer REST-API herzustellen. Für React-basierte Web-Apps können wir Axios verwenden, einen leichtgewichtigen HTTP-Client, der auf dem $http-Dienst in Angular.js v1.x basiert. Die Funktionen ähneln der nativen Fetch API.
von JavaScript. Axios ist Promise-basiert, was uns die Möglichkeit gibt, JavaScripts async und await für besser lesbaren synchronen Code zu integrieren. Es unterstützt auch das Abfangen und Abbrechen von Anfragen. Darüber hinaus gibt es einen integrierten clientseitigen Schutz gegen Cross-Site-Request-Forgery.
In dieser Anleitung zeigen wir, wie man Axios verwendet, um auf die beliebte JSON Placeholder-API in einer React-Demo-Anwendung zuzugreifen. Mehr über das JSON-Format in JavaScript erfahren Sie in diesem Tutorial.
Voraussetzungen
Um die in dieser Anleitung gezeigten Schritte auszuführen, benötigen Sie die folgenden Komponenten:
- Einen ordnungsgemäß konfigurierten Ubuntu-Server. Hier sind die Schritte zur Einrichtung Ihres eigenen Ubuntu-Servers auf CloudSigma.
- Die neueste Version von Node.js installiert. Erfahren Sie, wie man Node.js auf Ubuntu installiert.
- Ein neues React-Projekt mit Create React App. Es ist hilfreich, zuerst dieser Anleitung zur Einrichtung eines React-Projekts mit Create React App zu folgen.
- Grundlegendes Verständnis von HTML, CSS und JavaScript.
Schritt 1: Axios im React-Projekt installieren
Axios ist direkt als npm-Modul verfügbar. Siehe Axios auf npm. Wir müssen lediglich ein React-Projekt erstellen und das Axios-Paket installieren.
Der folgende npx-Befehl führt create-react-app aus, um ein neues React-Projekt zu erstellen. Der Projektname wird verwendet, um ein eigenes Verzeichnis für das Projekt zu erstellen. Hier haben wir das Projekt react-axios-demo genannt. Führen Sie den Befehl aus:
|
1 |
npx create-react-app react-axios-demo |
Wechseln Sie in das neu erstellte Projektverzeichnis:
|
1 |
cd react-axios-demo/ |
Rufen Sie als Nächstes den Befehl npm install auf, um Axios zu installieren. Wenn keine Version angegeben ist, lädt npm automatisch die neueste Version von Axios herunter und installiert sie:
|
1 |
npm install axios |
Unser Projekt ist jetzt bereit für die Verwendung von Axios! Es ist an der Zeit, seine Funktionen in die Tat umzusetzen.
Schritt 2: Einen GET-Request erstellen
In diesem Schritt zeigen wir, wie man eine neue Komponente erstellt, die Axios verwendet, um eine GET-Anfrage zu senden.
Erstellen Sie zuerst eine neue Komponente PersonList, die eine Liste von Namen anzeigt. Erstellen Sie ein eigenes Verzeichnis zum Speichern der Komponente:
|
1 |
mkdir -pv src/components |
Erstellen Sie als Nächstes die Datei PersonList.js :
|
1 |
touch PersonList.js |
Öffnen Sie die Datei in einem Texteditor. Wir verwenden Visual Studio Code für mehr Komfort und bessere Lesbarkeit. Geben Sie den folgenden JavaScript-Code ein:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import React from 'react'; import axios from 'axios'; export default class PersonList extends React.Component { state = { persons: [] } componentDidMount() { axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { const persons = res.data; this.setState({ persons }); }) } render() { return ( <ul> { this.state.persons .map(person => <li key={person.id}>{person.name}</li> ) } </ul> ) } } |
Hier:
-
Wir haben React und Axios importiert, damit wir beide in der Komponente verwenden können.
-
Wir klinken uns in den Lifecycle-Hook componentDidMount ein und senden eine GET-Anfrage.
Sie können axios.get(<url>) von einem API-Endpunkt verwenden, um ein Promise zu erhalten (gibt ein Response-Objekt zurück). Das Response-Objekt enthält die gewünschten Daten. Diese weisen wir dann dem Wert von person zu. Wir können auch zusätzliche Informationen über die Anfrage sammeln, wie den Statuscode unter res.status oder weitere Informationen aus res.request.
Als Nächstes müssen wir unsere Komponente zur Hauptdatei App.js-Datei hinzufügen. Fügen Sie die folgenden Codes hinzu:
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
Die Konfiguration für diesen Schritt ist abgeschlossen. Sie können die App nun ausführen und mit Ihrem bevorzugten Browser testen. Starten Sie den Entwicklungsserver:
|
1 |
npm start |
Wie wir sehen können, zeigt die Ausgabe eine Liste der Namen von Personen in zufälliger Reihenfolge:
Schritt 3: Erstellen einer POST-Anfrage
In diesem Abschnitt zeigen wir die Verwendung von Axios zur Durchführung einer anderen HTTP-Anfragemethode namens POST. Um dies zu demonstrieren, ist es unser Ziel, eine neue Komponente für unser React-Projekt namens PersonAdd.
Erstellen Sie die Datei PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
Öffnen Sie dann die Datei in einem Texteditor und geben Sie den folgenden Code ein:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonAdd extends React.Component { state = { name: '' } handleChange = event => { this.setState({ name: event.target.value }); } handleSubmit = event => { event.preventDefault(); const user = { name: this.state.name }; axios.post(`https://jsonplaceholder.typicode.com/users`, { user }) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> Name der Person: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Hinzufügen</button> </form> </div> ) } } |
In diesem Code nehmen wir die Benutzereingabe entgegen und senden (POST) den Inhalt an eine API. Innerhalb der handleSubmit-Funktion verhindern wir die Standardaktion des Formulars und aktualisieren den Zustand mit der Benutzereingabe. Bei der Verwendung von POST gibt sie dasselbe Antwortobjekt zurück. Wir können das Objekt innerhalb eines then-Aufrufs verwenden. Um die POST-Anfrage zu erfüllen, erfassen wir die Benutzereingabe und fügen sie zusammen mit der POST-Anfrage hinzu. Dies gibt uns eine Antwort. Wir protokollieren die Antwort mit console.log. Es sollte die user-Eingabe im Formular anzeigen.
Fügen Sie als Nächstes die Komponente zu App.js hinzu. Der vollständige Code sollte wie folgt aussehen:
|
1 2 3 4 5 6 7 8 9 10 11 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> </div> ) } |
Jetzt ist es an der Zeit, die Änderungen zu testen. Starten Sie den Entwicklungsserver:
|
1 |
npm start |
Überprüfen Sie die Änderung im Webbrowser:
Schritt 4: Erstellen einer DELETE-Anfrage
In diesem Abschnitt zeigen wir das Löschen von Elementen aus einer API mithilfe von axios.delete und der Verwendung einer URL als Parameter. Zur Demonstration erstellen Sie die Komponente PersonRemove. Erstellen Sie die Datei PersonRemove.js im Verzeichnis src/components:
|
1 |
touch src/components/PersonRemove.js |
Öffnen Sie danach die Datei in einem Texteditor und fügen Sie den folgenden Code hinzu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonRemove extends React.Component { state = { id: '' } handleChange = event => { this.setState({ id: event.target.value }); } handleSubmit = event => { event.preventDefault(); axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> Personen-ID: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">Löschen</button> </form> </div> ) } } |
Hier bietet das res-Objekt die Informationen über die Anfrage. Wir können dann console.log verwenden, nachdem das Formular abgesendet wurde.
Als Nächstes implementieren Sie die Komponente in App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; import PersonRemove from './components/PersonRemove'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> <PersonRemove/> </div> ) } |
Zeit, unseren Code erneut zu testen. Starten Sie den Server:
|
1 |
npm start |
Sie sollten ein neues Formular finden, das den Namen des Benutzers entgegennimmt und ihn aus der Liste entfernt:
Schritt 5: Basis-Instanz in Axios anwenden
Jetzt werden wir mit der Axios-Basisinstanz arbeiten. Hier können wir eine URL und andere Konfigurationselemente definieren. Um dies zu implementieren, erstellen Sie eine separate Datei api.js:
|
1 |
touch src/api.js |
Öffnen Sie sie in einem Texteditor und geben Sie den folgenden Code ein:
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
Sobald dies eingerichtet ist, können wir es innerhalb der PersonRemove-Komponente verwenden. So würde der Code aussehen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); API.delete(`users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } } |
Hier ist http://jsonplaceholder.typicode.com/ als Basis-URL festgelegt. Jetzt müssen wir nicht mehr jedes Mal die vollständige URL verwenden, wenn wir einen Endpunkt der API aufrufen.
Schritt 6: async und await implementieren
In diesem Abschnitt werden wir uns ansehen, wie man async und await implementiert, um mit Promises zu arbeiten. Das await-Schlüsselwort löst das promise auf und gibt den value zurück. Wir können diesen value einer Variablen zuweisen, um die Verwendung komfortabler zu gestalten.
So würde der aktualisierte Code von PersonRemove.js aussehen:
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); const response = await API.delete(`users/${this.state.id}`); console.log(response); console.log(response.data); } } |
Hier haben wir .then(). Sobald Promise aufgelöst ist, speichern wir den Wert in der Variable response.
Fazit
In diesem Tutorial haben wir verschiedene Beispiele für die Verwendung von Axios zur Arbeit mit REST-APIs untersucht. Die Codebeispiele zeigen das Erstellen von HTTP-Anfragen und das Verarbeiten von Antworten.
Möchtest du mehr über JavaScript erfahren? Sieh dir unsere anderen Einsteiger-Leitfäden zu verschiedenen JavaScript-Konzepten und -Funktionen an, zum Beispiel Datum und Uhrzeit, String-Manipulation, Klassen, und Objekte.
Viel Spaß beim Programmieren!
Kommentare
Noch keine Kommentare. Schreiben Sie den ersten.