Axios ist eine sehr beliebte Option zum Ausführen von HTTP-Anfragen in JavaScript. Erfahren Sie mithilfe dieses umfassenden Leitfadens, wie Sie dies effektiv tun.
Axios ist eine JavaScript-Bibliothek, die eine einfache API zum Senden von HTTP-Anfragen von clientseitigem JavaScript-Code oder serverseitigem Node.js-Code bereitstellt. Axios basiert auf der Promise-API von JavaScript, wodurch asynchroner Code besser wartbar ist.
Erste Schritte mit Axios
Sie können Axios in Ihrer App über 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-Bereich Ihrer HTML-Datei ein:
<script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script>
Mit diesem Ansatz können Sie Axios und seine HTTP-Methoden im Hauptteil Ihrer HTML-Skripte verwenden . Axios kann auch REST-APIs in einem Framework wie React nutzen .
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 install axios
# or
yarn add axios
Nach der Installation können Sie Axios in Ihrem JavaScript-Projekt verwenden:
const axios = require(‘axios’);
In diesem Leitfaden arbeiten Sie mit der kostenlosen JSONPlaceholder- API. Obwohl diese API über eine Reihe von Ressourcen verfügt, werden Sie nur die Endpunkte /comments und /posts nutzen . Endpunkte sind spezifische URLs, auf die zugegriffen werden kann, um Daten abzurufen oder zu bearbeiten.
GET-Anfragen mit Axios stellen
Es gibt mehrere Möglichkeiten, mit Axios eine GET-Anfrage zu stellen. Die Syntax hängt jedoch im Allgemeinen von den Vorlieben ab.
Eine Möglichkeit, eine GET-Anfrage zu stellen, ist die Verwendung der axios() -Methode mit einem Objekt, das die Anfragemethode als get und die URL angibt, an die die Anfrage gesendet werden soll.
Zum Beispiel:
const axios = require(“axios”);
axios({
method: “get”,
url: “https://jsonplaceholder.typicode.com/comments”,
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});
In diesem Beispiel wird mithilfe des asynchronen Programmiermodells ein Versprechen erstellt , indem die Methoden .then() und .catch() verkettet werden. Das Versprechen protokolliert die Antwort an die Konsole, wenn die Anfrage erfolgreich ist, und protokolliert die Fehlermeldung, wenn die Anfrage fehlschlägt.
Axios bietet auch eine einfachere Möglichkeit, GET-Anfragen zu stellen, die die Übergabe eines Objekts überflüssig machen, indem die .get()- Methode mit der Axios- Instanz verkettet wird.
Zum Beispiel:
axios
.get(“https://jsonplaceholder.typicode.com/comments”)
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});
POST-Anfragen mit Axios stellen
Eine POST-Anfrage mit Axios zu stellen ähnelt der einer GET-Anfrage. Mit dieser Anfrage können Sie Daten an einen Server senden.
Der folgende Codeausschnitt ist ein Beispiel für die Verwendung der .post()- Methode von Axios:
axios
.post(“https://jsonplaceholder.typicode.com/comments”, {
name: “Jackson Smith”,
email: “jsmith@example.com”,
body: “This is a piece of art.”,
})
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});
Der Code sendet eine POST-Anfrage an die JSONPlaceholder-API, um einen neuen Kommentar zu erstellen. Die Methode axios.post sendet Daten an den Endpunkt /comments .
Bei den in der Anfrage gesendeten Daten handelt es sich um ein Objekt mit den Eigenschaften name , email und body . Wenn die Anfrage erfolgreich ist, protokolliert die Methode then die Antwortdaten in der Konsole. Und wenn ein Fehler auftritt, protokolliert die Catch- Methode den Fehler in der Konsole.
PUT/PATCH-Anfragen mit Axios stellen
Sie können die PUT- oder PATCH-Anfrage 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-Anfrage mit Axios zu stellen, müssen Sie .put() oder verwenden . patch()- Methoden bzw.
Hier ist ein Beispiel dafür, wie Sie diese Methoden verwenden, um die E-Mail- Eigenschaft des Kommentars mit der ID 100 zu aktualisieren:
const axios = require(“axios”);
axios
.get(“https://jsonplaceholder.typicode.com/comments/100”)
.then((res) => {
console.log(res.data.email);
})
.catch((err) => {
console.error(err);
});
// Output:
// ‘Leone_Fay@orrin.com’
axios
.patch(“https://jsonplaceholder.typicode.com/comments/100”, {
email: “donaymilin@ether.com”,
})
.then((res) => {
console.log(res.data.email);
})
.catch((err) => {
console.error(err);
});
// Output:
// ‘donaymilin@ether.com’,
Dieses Programm stellt zunächst eine GET – Anfrage an den Endpunkt „ https://jsonplaceholder.typicode.com/comments/100 “ . Anschließend wird die E-Mail- Eigenschaft des Kommentars mit der ID 100 in der Konsole protokolliert. Wir stellen 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 an donaymilin@ether.com .
DELETE-Anfragen mit Axios stellen
Mit der DELETE- Anfrage können Sie eine Ressource auf dem Server löschen.
Nehmen Sie das folgende Beispiel, wie Sie mit der Methode .delete() eine Ressource vom Server löschen:
axios
.delete(“https://jsonplaceholder.typicode.com/comments/10”)
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});
//Output:
// {}
Durch 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 stellen
Mit Axios können Sie Daten von mehreren Endpunkten gleichzeitig abrufen. Dazu müssen Sie die Methode .all() verwenden. Diese Methode akzeptiert ein Array von Anfragen als Parameter und wird nur aufgelöst, wenn Sie alle Antworten erhalten.
Im folgenden Beispiel ruft die Methode .all() gleichzeitig Daten von zwei Endpunkten ab:
axios
.all([
axios.get(“https://jsonplaceholder.typicode.com/comments?_limit=2”),
axios.get(“https://jsonplaceholder.typicode.com/posts?_limit=2”),
])
.then(
axios.spread((comments, posts) => {
console.log(comments.data);
console.log(posts.data);
})
)
.catch((err) => console.error(err));
Der obige Codeblock sendet gleichzeitig Anfragen und übergibt die Antworten dann an die .then()- Methode. Die .spread()- Methode von Axios trennt die Antworten und weist jede Antwort ihrer Variablen zu.
Schließlich protokolliert die Konsole die Dateneigenschaft der beiden Antworten: Kommentare und Beiträge.
Abfangen von Anfragen mit Axios
Manchmal müssen Sie möglicherweise eine Anfrage abfangen, bevor sie den Server erreicht. Sie können die Methode interceptors.request.use() von Axios verwenden , um Anfragen abzufangen.
Im folgenden Beispiel protokolliert die Methode für jede gestellte Anfrage den Typ der Anfrage an die Konsole:
axios.interceptors.request.use(
(config) => {
console.log(`${config.method} request made`);
return config;
},
(error) => {
return Promise.reject(error);
}
);
axios
.get(“https://jsonplaceholder.typicode.com/comments?_limit=2”)
.then((res) => console.log(res.data))
.catch((err) => console.error(err));
Das Programm definiert einen Axios-Interceptor mithilfe der Methode axios.interceptors.request.use . Diese Methode verwendet Konfigurations- und Fehlerobjekte als Argumente. Das Konfigurationsobjekt enthält Informationen über die Anfrage, einschließlich der Anfragemethode ( config.method ) und der Anfrage-URL ( config.url ).
Die Interceptor-Funktion gibt das Konfigurationsobjekt zurück , sodass die Anforderung normal ausgeführt werden kann. Im Fehlerfall gibt die Funktion das abgelehnte Promise- Objekt zurück mcmurtry speirling.
Abschließend fordert das Programm zum Testen des Abfangjägers auf. Die Konsole protokolliert die Art der gestellten Anfrage, in diesem Fall eine GET-Anfrage.
Axios hat noch mehr zu bieten
Sie haben gelernt, wie Sie mit Axios Anfragen in Ihren Projekten stellen und abfangen. Viele weitere Funktionen, wie das Transformieren von Anfragen und die Verwendung von Axios-Instanzen, stehen Ihnen als JavaScript-Entwickler zur Verfügung. Axios bleibt eine bevorzugte Option für HTTP-Anfragen in Ihren JavaScript-Anwendungen. Allerdings ist die Fetch-API eine weitere gute Option, die Sie erkunden können.