In React erfolgt die Backend-Kommunikation normalerweise über das HTTP-Protokoll. Während viele Entwickler mit der XML-HTTP-Anfrageschnittstelle und der Fetch-API zum Senden von HTTP-Anfragen vertraut sind, gibt es eine weitere leistungsstarke Bibliothek namens Axios, die den Prozess noch weiter vereinfacht.
Inhaltsverzeichnis
- Voraussetzungen
- Einführung in Axios
- Schritte zum Erstellen einer Reaktionsanwendung
- Bedarf an Axios in React
- GET-Anfrage mit Axios
- POST-Anfrage mit Axios:
- Anfrage mit Axios löschen:
- Antwortobjekte in Axios
- Fehlerobjekt:
- Funktionen der Axios-Bibliothek
- Kurzschriftmethoden in Axios
- Abschluss
Einführung in Axios:
Axios, eine beliebte Bibliothek, wird hauptsächlich zum Senden asynchroner HTTP-Anfragen an REST-Endpunkte verwendet. Diese Bibliothek ist sehr nützlich, um CRUD-Operationen durchzuführen.
- Diese beliebte Bibliothek wird zur Kommunikation mit dem Backend verwendet. Axios unterstützt die Promise-API, nativ für JS ES6.
- Mit Axios stellen wir API-Anfragen in unserer Anwendung. Sobald die Anfrage gestellt wurde, erhalten wir die Daten zurück und verwenden diese Daten dann in unserem Projekt.
- Diese Bibliothek ist bei Entwicklern sehr beliebt. Sie können auf GitHub nachschauen und dort finden Sie 78.000 Sterne.
Bevor Sie Axios installieren, sollte Ihre React-Projekt-App für die Installation dieser Bibliothek bereit sein. Ein ... kreieren Reagieren Befolgen Sie zur Beantragung die unten aufgeführten Schritte…
Schritte zum Erstellen einer Reaktionsanwendung:
Schritt 1: Unten finden Sie den Befehl zum Erstellen einer React-App in Ihrem Projekt ...
npx create-react-app myreactapp>
Schritt 2: Geben Sie das im ersten Schritt erstellte Verzeichnis ein.
cd myreactapp>
Schritt 3: Installieren Sie die Axios-Bibliothek mit dem unten angegebenen Befehl ...
npm i axios>
Projektstruktur:
c-Programm-String-Array
Die aktualisierten Abhängigkeiten in package.json Datei.
'dependencies': { '@testing-library/jest-dom': '^5.17.0', '@testing-library/react': '^13.4.0', '@testing-library/user-event': '^13.5.0', 'axios': '^1.6.2', 'react': '^18.2.0', 'react-dom': '^18.2.0', 'react-scripts': '5.0.1', 'web-vitals': '^2.1.4' },> Beispiel: Dieses Code-Snippet verwendet Axios, um eine HTTP-Anfrage an den Backend-Server zu stellen.
Javascript
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> class App extends React.Component {> >state = {> >newfiles:>null>,> >};> >handleFile(e) {> >// Getting the files from the input> >let newfiles = e.target.newfiles;> >this>.setState({ newfiles });> >}> >handleUpload(e) {> >let newfiles =>this>.state.newfiles;> >let formData =>new> FormData();> >// Adding files to the formdata> >formData.append(>'image'>, newfiles);> >formData.append(>'name'>,>'Name'>);> >axios({> >// Endpoint to send files> >url:>' http://localhost:8080/files '>,> >method:>'POST'>,> >headers: {> >// Add any auth token here> >authorization:>'your token comes here'>,> >},> >// Attaching the form data> >data: formData,> >})> >// Handle the response from backend here> >.then((res) =>{})> >// Catch errors if any> >.>catch>((err) =>{});> >}> >render() {> >return> (> >> >> > type='file' // To select multiple files multiple='multiple' onChange={(e) =>this.handleFile(e)} /> onClick={(e) => this.handleUpload(e)}> Dateien senden ); } } Standard-App exportieren;> |
>
>
Schritte zum Ausführen der Anwendung: Öffnen Sie das Terminal und geben Sie den folgenden Befehl ein.
npm start>
Ausgabe: Öffnen Sie den Browser und unser Projekt wird in der URL angezeigt http://localhost:3000/
Das obige Beispiel ist nur eine kleine Codebeschreibung, um zu veranschaulichen, wie Sie Axios in Ihrem Projekt verwenden. Im nächsten Abschnitt werden wir mehrere Methoden wie GET, POST und PUT in Axios besprechen.
Bedarf an Axios in React:
Wie wir bereits besprochen haben, ermöglicht Ihnen Axios die Kommunikation mit den APIs in Ihrem React-Projekt. Dieselben Aufgaben können auch mit AJAX ausgeführt werden, Axios bietet Ihnen jedoch mehr Funktionalität und Features und hilft Ihnen, Ihre Anwendung schnell zu erstellen.
Axios ist eine Versprechen-basierte Bibliothek, daher müssen Sie einige Versprechen-basierte asynchrone HTTP-Anfragen implementieren. jQuery und AJAX führen ebenfalls die gleiche Aufgabe aus, aber im React-Projekt verarbeitet React alles in seinem eigenen virtuellen DOM, sodass jQuery überhaupt nicht verwendet werden muss.
Nachfolgend finden Sie ein Beispiel zum Abrufen der Kundendaten mit Axios…
Javascript
const getCustomersData = () =>{> >axios> >.get(>' https://jsonplaceholder.typicode.com/customers '>)> >.then(data =>console.log(data.data))> >.>catch>(error =>console.log(error));> };> getCustomersData();> |
Unterschied zwischen Binärbaum und binärem Suchbaum
>
>
Kommen wir nun zum nächsten Punkt und verstehen wir, wie verschiedene Vorgänge durchgeführt werden können, z. B. das Abrufen der Daten oder das Konsumieren der Daten mithilfe von Axios (GET-POST-DELETE).
GET-Anfrage mit Axios:
Erstellen Sie eine Komponente MyBlog und verknüpfen Sie sie mit dem Lebenszyklus der Komponente DidMount. Importieren Sie oben die Axios und holen Sie die Daten mit Get request ab.
Javascript
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class MyList extends React.Component {> >state = {> >blogs: [],> >};> >componentDidMount() {> >axios> >.get(> >`https:>//jsonplaceholder.typicode.com/posts`> >)> >.then((response) =>{> >const posts = response.data;> >this>.setState({ posts });> >});> >}> >render() {> >return> (> >>> >{>this>.state.posts.map((post) =>{> >post.title;> >})}> >>>);> >}> }> |
>
>
Hier verwenden wir axios.get (URL), um ein Versprechen zu erhalten, das ein Antwortobjekt zurückgibt. Die zurückgegebene Antwort wird dem Objekt des Beitrags zugewiesen. Wir können auch andere Informationen wie Statuscode usw. abrufen.
POST-Anfrage mit Axios:
Erstellen Sie eine neue Komponente „AddPost“ für Post-Anfragen. Durch diese Anfrage wird ein Beitrag zur Beitragsliste hinzugefügt.
Javascript
eol in Python
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class AddPost extends React.Component {> >state = {> >postTitle:>''>,> >};> >handleChange = (event) =>{> >this>.setState({ postTitle: event.target.value });> >};> >handleSubmit = (event) =>{> >event.preventDefault();> >const post = {> >postName:>this>.state.postName,> >};> >axios> >.post(> >`https:>//jsonplaceholder.typicode.com/posts`,> >{ post }> >)> >.then((res) =>{> >console.log(res);> >console.log(res.data);> >});> >};> >render() {> >return> (> >> >'{this.handleSubmit}'>Beitragsname: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Add ); } }> |
>
>
Im obigen Code haben wir eine HTTP-Post-Anfrage gestellt und der Datenbank einen neuen Beitrag hinzugefügt. Das onChange-Ereignis löst die Methode handleChange() aus und aktualisiert die Anfrage, wenn die API-Anfrage die Daten erfolgreich zurückgibt.
Anfrage mit Axios löschen:
Um die Löschanforderung an den Server zu senden, wird axios.delete verwendet. Sie müssen beim Erstellen dieser Anforderungs-URL und der optionalen Konfiguration zwei Parameter angeben.
axios.delete(url, { data: { foo: 'bar' }, headers: { 'Authorization': '******' } });> Beim Senden der Löschanfrage müssen Sie den Text und die Header der Anfrage festlegen. Verwenden Sie zu diesem Zweck config.data. Ändern Sie in der obigen POST-Anfrage den Code wie unten angegeben ...
Javascript
handleSubmit = event =>{> >event.preventDefault();> >axios.>delete>(> >`https:>//jsonplaceholder.typicode.com/posts/${this.state.postName}`)> >.then(res =>{> >console.log(res);> >console.log(res.data);> >})> }> |
Java-Tupel
>
>
Antwortobjekte in Axios:
Wenn Sie eine Anfrage an den Server senden, erhalten Sie vom Server ein Antwortobjekt mit den unten angegebenen Eigenschaften ...
- Daten: Sie erhalten Daten vom Server in Payload-Form. Diese Daten werden im JSON-Format zurückgegeben und in ein JavaScript-Objekt für Sie analysiert.
- Status: Sie erhalten den HTTP-Code vom Server zurückgegeben.
- StatusText: Vom Server zurückgegebene HTTP-Statusmeldung.
- Überschriften: Alle Header werden vom Server zurückgesendet.
- Konfiguration: ursprüngliche Anfragekonfiguration.
- Anfrage: tatsächliches XMLHttpRequest-Objekt.
Fehlerobjekt:
Sie erhalten ein Fehlerobjekt, wenn bei der Anfrage ein Problem auftritt. Promise wird mit einem Fehlerobjekt mit den angegebenen Eigenschaften abgelehnt
- Nachricht: Fehlermeldungstext.
- Antwort: Antwortobjekt (falls empfangen).
- Anfrage: Tatsächliches XMLHttpRequest-Objekt (bei Ausführung in einem Browser).
- Konfiguration: Ursprüngliche Anforderungskonfiguration.
Funktionen der Axios-Bibliothek
- JSON-Daten werden automatisch transformiert.
- Es transformiert die Anfrage- und Antwortdaten.
- Nützlich beim Senden von HTTP-Anfragen von Node.js
- Es erstellt XMLHttpRequests über den Browser.
- Bieten Sie clientseitige Unterstützung für den Schutz vor XSRF.
- Unterstützt Promise-API.
- Möglichkeit, die Anfrage abzubrechen.
Kurzschriftmethoden in Axios:
Nachfolgend finden Sie einige Abkürzungsmethoden von Axios…
- axios.request(config)
- axios.head(url[, config])
- axios.get(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.delete(url[, config])
- axios.options(url[, config])
- axios.patch(url[, data[, config]])
Abschluss
In diesem Artikel wurde alles über die Axios-Bibliothek erklärt. Wir haben einige nützliche Vorgänge wie das Abrufen der Daten, das Veröffentlichen der Daten, das Aktualisieren der Daten oder das Löschen der Daten in Axios besprochen. Sobald Sie mit der Arbeit an React beginnen, müssen Sie diese Bibliothek verwenden, um mit dem Datenbankserver zu kommunizieren. Deshalb ist es wichtig, es in die Praxis umzusetzen und zu verstehen, wie die Dinge in Axios funktionieren.