Eine vollständige Anleitung zum Arbeiten mit Axios

Axios ist eine JavaScript-Bibliothek, die eine einfache API zum Senden von HTTP-Anforderungen von clientseitigem JavaScript-Code oder serverseitigem Node.js-Code bereitstellt. Axios basiert auf der Promise-API von JavaScript, die asynchronen Code wartungsfreundlicher macht.

Erste Schritte mit Axios

Sie können Axios in Ihrer App verwenden, indem Sie ein Content Delivery Network (CDN) verwenden oder es in Ihrem Projekt installieren.

Um Axios direkt in HTML zu verwenden, kopieren Sie den CDN-Link unten und fügen Sie ihn in den Head-Abschnitt Ihrer HTML-Datei ein:

<SkriptQuelle=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">Skript>

Mit diesem Ansatz können Sie Axios und seine verwenden HTTP-Methoden im Hauptteil Ihrer HTML-Skripte. Axios kann das auch Verwenden Sie REST-APIs in einem Framework wie React.

Um Axios in einem Node.js-Projekt zu verwenden, installieren Sie es in Ihrem Projektverzeichnis, indem Sie entweder den npm- oder den Yarn-Paketmanager verwenden:

npm installiert Axios
# oder
Garn hinzufügen Axios

Nach der Installation können Sie Axios in Ihrem JavaScript-Projekt verwenden:

konst axios = erfordern('axios');

Entlang dieser Anleitung arbeiten Sie mit dem kostenlosen JSONPlatzhalter API. Obwohl diese API über eine Reihe von Ressourcen verfügt, verwenden Sie nur die /comments Und /posts Endpunkte. Endpunkte sind bestimmte URLs, auf die zugegriffen werden kann, um Daten abzurufen oder zu manipulieren.

Erstellen von GET-Anfragen mit Axios

Es gibt mehrere Möglichkeiten, eine GET-Anfrage mit Axios zu stellen. Die Syntax hängt jedoch im Allgemeinen von der Präferenz ab.

Eine der Möglichkeiten, eine GET-Anforderung zu stellen, ist die Verwendung von axios() -Methode mit einem Objekt, das die Anforderungsmethode als angibt erhalten und die URL, an die die Anfrage gesendet werden soll.

Zum Beispiel:

konst axios = erfordern("axios");
Axios ({
 Methode: "erhalten",
 URL: " https://jsonplaceholder.typicode.com/comments",
})
 .Dann((res) => {
Konsole.log (res.data);
 })
 .fangen((irren) => {
Konsole.error (irr);
 });

Dieses Beispiel erstellt ein Versprechen unter Verwendung des asynchronen Programmiermodells durch Verkettung der .Dann() Und .fangen() Methoden. Das Promise protokolliert die Antwort an die Konsole, wenn die Anforderung erfolgreich ist, und protokolliert die Fehlermeldung, wenn die Anforderung fehlschlägt.

Axios bietet auch eine einfachere Möglichkeit, GET-Anforderungen zu stellen, die die Notwendigkeit beseitigen, ein Objekt durch Verketten von zu übergeben .erhalten() Methode zum Axios Beispiel.

Zum Beispiel:

Axios
 .erhalten(" https://jsonplaceholder.typicode.com/comments")
 .Dann((res) => {
Konsole.log (res.data);
 })
 .fangen((irren) => {
Konsole.error (irr);
 });

Erstellen von POST-Anforderungen mit Axios

Das Erstellen einer POST-Anforderung mit Axios ähnelt dem Erstellen einer GET-Anforderung. Mit dieser Anfrage können Sie Daten an einen Server senden.

Das folgende Code-Snippet ist ein Beispiel für die Verwendung von Axios' .Post() Methode:

Axios
 .Post(" https://jsonplaceholder.typicode.com/comments", {
 Name: "Jackson Smith",
 Email: "[email protected]",
 Körper: "Das ist ein Kunstwerk.",
 })
 .Dann((res) => {
Konsole.log (res.data);
 })
 .fangen((irren) => {
Konsole.error (irr);
 });

Der Code sendet eine POST-Anforderung an die JSONPlaceholder-API, um einen neuen Kommentar zu erstellen. Der axios.post Methode sendet Daten an die /comments Endpunkt.

Die in der Anfrage gesendeten Daten sind ein Objekt mit a Name, Email, Und Körper Eigentum. Wenn die Anfrage erfolgreich ist, wird die Dann -Methode protokolliert die Antwortdaten in der Konsole. Und wenn es einen Fehler gibt, der fangen -Methode protokolliert den Fehler in der Konsole.

Erstellen von PUT/PATCH-Anforderungen mit Axios

Sie können die PUT- oder PATCH-Anforderung verwenden, um eine vorhandene Ressource auf dem Server zu aktualisieren. Während PUT die gesamte Ressource ersetzt, aktualisiert PATCH nur die angegebenen Felder.

Um eine PUT- oder PATCH-Anforderung mit Axios zu stellen, müssen Sie die verwenden .setzen() oder .patch() Methoden bzw.

Hier ist ein Beispiel für die Verwendung dieser Methoden zum Aktualisieren der Email Eigenschaft des Kommentars mit einer ID von 100:

konst axios = erfordern("axios");
Axios
 .erhalten(" https://jsonplaceholder.typicode.com/comments/100")
 .Dann((res) => {
Konsole.log (res.data.email);
 })
 .fangen((irren) => {
Konsole.error (irr);
 });
// Ausgang:
// '[email protected]'
Axios
 .patch(" https://jsonplaceholder.typicode.com/comments/100", {
 Email: "[email protected]",
 })
 .Dann((res) => {
Konsole.log (res.data.email);
 })
 .fangen((irren) => {
Konsole.error (irr);
 });
// Ausgang:
// '[email protected]',

Dieses Programm macht zuerst eine GET-Anfrage an den Endpunkt " https://jsonplaceholder.typicode.com/comments/100". Es protokolliert dann die Email Eigenschaft des Kommentars mit einer ID von 100 zur Konsole. Wir machen eine GET-Anfrage, damit Sie sehen können, was sich nach der PATCH-Anfrage geändert hat.

Die zweite Anfrage ist eine PATCH-Anfrage an denselben Endpunkt. Dieser Code aktualisiert die E-Mail des Kommentars auf [email protected].

DELETE-Anforderungen mit Axios stellen

Du kannst den... benutzen LÖSCHEN Anforderung zum Löschen einer Ressource auf dem Server.

Nehmen Sie das folgende Beispiel zur Verwendung von .löschen() Methode zum Löschen einer Ressource vom Server:

Axios
 .löschen(" https://jsonplaceholder.typicode.com/comments/10")
 .Dann((res) => {
Konsole.log (res.data);
 })
 .fangen((irren) => {
Konsole.error (irr);
 });
//Output:
// {}

Durch das Protokollieren eines leeren Objekts in der Konsole zeigt der obige Code, dass der Kommentar mit der ID 10 gelöscht wurde.

Gleichzeitige Anfragen mit Axios

Mit Axios können Sie Daten von mehreren Endpunkten gleichzeitig abrufen. Dazu müssen Sie die verwenden .alle() Methode. Diese Methode akzeptiert ein Array von Anforderungen als Parameter und wird nur aufgelöst, wenn Sie alle Antworten erhalten.

Im folgenden Beispiel ist die .alle() -Methode ruft Daten von zwei Endpunkten gleichzeitig ab:

Axios
 .alle([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .Dann(
 axios.spread((Kommentare, Beiträge) => {
Konsole.log (Kommentare.Daten);
Konsole.log (Beiträge.Daten);
 })
 )
 .fangen((irren) =>Konsole.Fehler (err));

Der obige Codeblock sendet gleichzeitig Anforderungen und leitet dann die Antworten an die weiter .Dann() Methode. Axios .Ausbreitung() -Methode trennt die Antworten und weist jede Antwort ihrer Variablen zu.

Schließlich protokolliert die Konsole die Daten Eigenschaft der beiden Antworten: Kommentare und Beiträge.

Anfragen mit Axios abfangen

Manchmal müssen Sie möglicherweise eine Anfrage abfangen, bevor sie den Server erreicht. Sie können Axios verwenden interceptors.request.use() Methode zum Abfangen von Anfragen.

Im folgenden Beispiel protokolliert die Methode den Anforderungstyp für jede gestellte Anforderung in der Konsole:

axios.interceptors.request.use(
 (Konfiguration) => {
Konsole.Protokoll(`${config.method} Anfrage gestellt“.);
zurückkehren Konfiguration;
 },
 (Fehler) => {
zurückkehrenVersprechen.ablehnen (Fehler);
 }
);
Axios
 .erhalten(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .Dann((res) =>Konsole.log (res.data))
 .fangen((irren) =>Konsole.Fehler (err));

Das Programm definiert einen Axios-Abfangjäger mit der axios.interceptors.request.use Methode. Diese Methode dauert Konfig Und Fehler Objekte als Argumente. Der Konfig Objekt enthält Informationen über die Anfrage, einschließlich der Anfragemethode (config.method) und die Anforderungs-URL (config.url).

Die Interceptor-Funktion gibt die zurück Konfig -Objekt, sodass die Anfrage normal fortgesetzt werden kann. Wenn ein Fehler auftritt, gibt die Funktion den abgelehnten zurück Versprechen Objekt.

Schließlich stellt das Programm eine Anfrage zum Testen des Abfangjägers. Die Konsole protokolliert den Typ der gestellten Anfrage, in diesem Fall eine GET-Anfrage.

Axios hat mehr zu bieten

Sie haben gelernt, wie Sie Anfragen in Ihren Projekten mit Axios stellen und abfangen. Als JavaScript-Entwickler stehen Ihnen viele weitere Funktionen wie das Transformieren von Anforderungen und die Verwendung von Axios-Instanzen zur Verfügung. Axios bleibt eine bevorzugte Option für HTTP-Anforderungen in Ihren JavaScript-Anwendungen. Die Fetch-API ist jedoch eine weitere gute Option, die Sie erkunden können.