Verbinden von axios mit React: Schritt für Schritt Anleitung

Interaktive Anwendungen, die mit React erstellt wurden, erfordern häufig Serverinteraktionen. Dazu wird häufig die Axios-Bibliothek verwendet. Es bietet eine einfache und bequeme Möglichkeit, HTTP-Anfragen zu senden und Antworten zu erhalten. In diesem Artikel erfahren Sie, wie Sie Axios in einem Projekt auf React verbinden und verwenden können.

Schritt 1: Installieren von axios.

Der erste Schritt besteht darin, Axios in Ihrem Projekt zu installieren. Öffnen Sie das Terminal und navigieren Sie zum Projektordner. Führen Sie den folgenden Befehl aus:

npm install axios

Dadurch wird axios installiert und abhängig von Ihrem Projekt hinzugefügt.

Schritt 2: Axios importieren und verwenden.

Wenn die Installation abgeschlossen ist, können Sie Axios in jede Komponente Ihres Projekts importieren. Fügen Sie dazu die folgende Zeile am Anfang der Datei hinzu:

import axios from 'axios';

Jetzt können Sie axios zum Senden von HTTP-Anfragen verwenden. Sie können beispielsweise eine Funktion erstellen, die eine GET-Anfrage sendet:

Daher ist die Verbindung von Axios in einem Projekt auf React ziemlich einfach und ermöglicht eine einfache Kommunikation mit dem Server. Aufgrund seiner Einfachheit und Flexibilität ist axios zu einer der beliebtesten Bibliotheken für die Arbeit mit HTTP-Anfragen in React-Anwendungen geworden.

Was ist Axios und warum wird es benötigt

Warum brauchen wir Axios? Es hat einige Vorteile gegenüber anderen Bibliotheken zum Senden von HTTP-Anfragen:

Der erste und wichtigste Vorteil von axios ist seine Benutzerfreundlichkeit. Es bietet eine sehr benutzerfreundliche und übersichtliche API zum Ausführen von Abfragen. Es ist nicht notwendig, großen und komplexen Code zu schreiben - mit axios kann dies in mehreren Zeilen erfolgen.

Der zweite Vorteil besteht darin, die Promise-Schnittstelle zu unterstützen. Mit Promise können Sie asynchrone Operationen in JavaScript verarbeiten und den Code besser lesbar machen. Dadurch wird die Verarbeitung von Abfrageergebnissen einfacher und verständlicher.

Der dritte Vorteil von axios ist seine Fähigkeit, Daten automatisch zu konvertieren. Zum Beispiel kann es eine JSON-Antwort automatisch in ein JavaScript-Objekt konvertieren oder umgekehrt. Dies erleichtert das Arbeiten mit Daten auf der Clientseite und ermöglicht es Ihnen, sich auf die Geschäftslogik der Anwendung zu konzentrieren.

Der vierte Vorteil von axios ist die Möglichkeit, Interzeptoren zu verwenden. Interceptoren ermöglichen es uns, Anfragen und Antworten vor und nach dem Senden zu manipulieren. Zum Beispiel können wir allen Anforderungen Header hinzufügen oder einen Autorisierungsfehler behandeln. Dies ist sehr praktisch, wenn wir eine allgemeine Logik haben, die wir auf mehrere Abfragen anwenden möchten.

Und schließlich ist der letzte Vorteil von axios die Möglichkeit, Fehler zu behandeln. Es bietet übersichtliche und bequeme Methoden zur Behandlung verschiedener Arten von Fehlern, z. B. Netzwerkfehlern oder Serverfehlern. Wir können dem Benutzer leicht eine Fehlermeldung anzeigen oder bestimmte Aktionen ausführen, wenn eine bestimmte Art von Fehler auftritt.

Schritt 1: Installieren von axios

Bevor Sie axios in Ihrem React-Projekt verwenden können, müssen Sie es mithilfe des npm-Paketmanagers installieren.

Der Befehl npm install axios installiert axios und alle seine Abhängigkeiten in Ihrem React-Projekt. Nach erfolgreicher Installation können Sie axios in eine beliebige Datei Ihrer Anwendung importieren.

Verwenden von npm für die Installation

Bevor Sie axios in Ihrem Projekt auf React verwenden können, müssen Sie es mit npm (Node Package Manager) installieren.

Öffnen Sie dazu eine Eingabeaufforderung oder ein Terminal in Ihrem Projektordner und führen Sie den folgenden Befehl aus:

npm install axios

Dieser Befehl lädt axios und seine Abhängigkeiten herunter und installiert sie in Ihrem Projekt. Sobald die Installation abgeschlossen ist, können Sie beginnen, axios in Ihrem React-Code zu verwenden.

Verbinden von Axios mit einem React-Projekt

Sie verwenden häufig die Axios-Bibliothek, um mit HTTP-Anforderungen in einem React-Projekt zu arbeiten. Es bietet eine einfache und benutzerfreundliche Schnittstelle zum Senden und Bearbeiten von Anfragen.

Die Verbindung von Axios zu einem React-Projekt ist einfach genug. Zuerst müssen Sie die Bibliothek in Ihrem Projekt installieren. Dazu können Sie den npm- oder Yarn-Paketmanager verwenden. Führen Sie den Befehl an der Eingabeaufforderung aus:

npm install axios

yarn add axios

Nachdem Sie das Axios-Paket installiert haben, können Sie es in eine Komponentendatei importieren, in der Sie mit Abfragen arbeiten können. Fügen Sie dazu die folgende Zeile am Anfang der Datei hinzu:

import axios from 'axios';

Sie können jetzt Axios-Methoden zum Senden von Anforderungen verwenden. Um beispielsweise eine GET-Anforderung an den Server zu senden, können Sie den folgenden Code verwenden:

axios.get('https://api.example.com/data').then(response => ).catch(error => );

Mit Axios können Sie auch POST-Anfragen senden, Parameter und Header übergeben, verschiedene Datentypen (JSON, FormData usw.) verarbeiten.) sowie Fehler abfangen und behandeln.

Die Verbindung von Axios zu einem React-Projekt vereinfacht und beschleunigt den Umgang mit HTTP-Anforderungen, wodurch es verständlicher und flexibler wird.

Schritt 2: Axios-Anwendungsbeispiele

Nach der Installation von axios können Sie es in Ihrer React-Anwendung verwenden. Hier sind einige Beispiele, um Ihnen den Einstieg zu erleichtern:

1. Abrufen von Daten mithilfe einer GET-Anfrage:

axios.get('/api/data').then(response => ).catch(error => );

2. Senden von Daten mithilfe einer POST-Anfrage:

axios.post('/api/data', < name: 'John', age: 30 >).then(response => ).catch(error => );

3. Aktualisieren von Daten mithilfe einer PUT-Abfrage:

axios.put('/api/data/1', < name: 'John', age: 35 >).then(response => ).catch(error => );

4. Löschen von Daten mithilfe einer DELETE-Abfrage:

axios.delete('/api/data/1').then(response => ).catch(error => );

Sie können diese Beispiele an Ihre Anwendung anpassen, indem Sie die entsprechende URL und die Daten angeben, die Sie senden oder empfangen möchten. Denken Sie daran, dass axios Promis zurückgibt, daher müssen Sie Methoden verwenden, um die Daten zu verarbeiten .then() und .catch() .

Senden einer GET-Anfrage

Führen Sie die folgenden Schritte aus, um eine GET-Anforderung mit axios in React zu senden:

Schritt 1: Installieren Sie das axios-Paket mit dem Befehl in Ihrem Projekt:

npm install axios

Schritt 2: Importieren Sie Axios in die Komponente, an der Sie die GET-Anforderung senden möchten:

import axios from 'axios';

Schritt 3: Erstellen Sie in Ihrer Komponente eine Funktion, die eine GET-Anforderung sendet:

const fetchData = async () =>

const response = await axios.get('https://api.example.com/data');

Schritt 4: Rufen Sie die Funktion fetchData an der gewünschten Stelle innerhalb der Komponente auf:

Dadurch wird beim Einhängen der Komponente eine GET-Anforderung gesendet.

Jetzt können Sie axios verwenden, um GET-Anfragen mit Leichtigkeit an React zu senden!

Senden einer Postanfrage

Um eine POST-Anfrage mit axios in React zu senden, müssen wir die folgenden Schritte ausführen:

Axios in eine Komponente importieren:

import axios from 'axios';

const postData = () => ).then(response => ).catch(error => );>

return (
>Отправить POST-запрос
);

Schritt 3: Fehlerbehandlung

Wenn Sie die axios-Bibliothek in React verwenden, ist es wichtig, die Behandlung möglicher Fehler zu berücksichtigen, die bei der Ausführung von HTTP-Anforderungen auftreten können. Dazu können Sie die catch() -Methode verwenden, mit der Sie den Fehler abfangen und behandeln können.

Im folgenden Beispiel wird die grundlegende Fehlerbehandlung veranschaulicht:

axios.get('/api/data').then((response) => ).catch((error) => );

In diesem Beispiel werden die Daten an die Konsole ausgegeben, wenn die Abfrage erfolgreich ist. Im Falle eines Fehlers wird eine Fehlermeldung angezeigt.

Dazu können Sie bedingte Anweisungen verwenden, um den Fehlertyp zu überprüfen, und je nach Typ die entsprechenden Schritte ausführen. Zum Beispiel:

axios.get('/api/data').then((response) => ).catch((error) =>  else if (error.request) else >);

In diesem Beispiel überprüfen wir den Fehlertyp mit bedingten Anweisungen: Wenn der Fehler die response-Eigenschaft hat, bedeutet dies, dass der Server eine Antwort mit einem HTTP-Fehlerstatus zurückgegeben hat. Wir können Fehlerinformationen wie eine Fehlermeldung und einen Status anzeigen. Wenn der Fehler die request-Eigenschaft aufweist, bedeutet dies, dass die Anforderung gesendet wurde, aber keine Antwort erhalten wurde. Wir können auch Informationen über diesen Fehler anzeigen. Wenn der Fehler weder die response-Eigenschaft noch die request-Eigenschaft aufweist, bedeutet dies, dass dies ein anderer Fehler ist und wir möglicherweise eine Fehlermeldung ausgeben.

Daher ist es bei der Verwendung von axios in React wichtig, die Fehlerbehandlung vorzunehmen, um den Benutzer über die Fehler zu informieren und entsprechende Schritte zur Behebung durchzuführen.

Fehlerbehandlung innerhalb einer Abfrage

Wenn eine Anforderung mit Axios ausgeführt wird, kann eine Situation auftreten, in der der Server einen Fehler zurückgibt. Sie können die Methode verwenden, um solche Fehler korrekt zu behandeln.catch() nach der Methode .then() .

axios.get('/api/data').then(response => ).catch(error => );

Wenn die Anforderung erfolgreich ist, ist der Code drin .then() wird ausgeführt. Andernfalls ist der Code drin .catch() wird ausgeführt und eine Fehlermeldung wird in der Konsole angezeigt.

Fehlerbehandlung auf Komponentenebene

Wenn wir axios in React verwenden, um Anfragen an den Server zu senden, kann es Situationen geben, in denen die Anforderung fehlschlagen kann. Um solche Fehler auf Komponentenebene zu behandeln, können wir einen Try-catch-Block und einen axios-Catch-Block verwenden.

Um zu beginnen, können wir unsere Anfrage in einen try-Block einwickeln:

try catch (error) 

Wenn die Anforderung erfolgreich ist, wird der Code im try-Block ausgeführt. Im Falle eines Fehlers gehen wir zum Catch-Block, wo wir den Fehler behandeln werden.

try catch (error)

Die Fehlerbehandlung auf Komponentenebene mit einem try-catch-Block ermöglicht es uns daher, Fehler bei der Ausführung von Abfragen mit axios in React flexibler zu verwalten.