So installieren und verwenden Sie Axios in JavaScript
Axios ist ein HTTP -Client, mit dem XMLHTTPrequest aus dem Browser sowie HTTP -Anforderungen für Projekte mit NodeJS erstellt wurde. Es wird oft als isomorpher HTTP -Client bezeichnet, wobei isomorphe Mittel sowohl für NodeJs als auch für Browser (Vanille -JavaScript) bezeichnet werden.
Axios liefert Methoden wie erhalten, Post, Und löschen und transformiert automatisch die JSON -Daten, was sie von den trivialen JavaScript -Methoden wie der unterscheidet bringen() Methode aus der Fetch -API.
Installieren von Axios in JavaScript
Wie bereits oben erwähnt, ist Axios sowohl für den Browser als auch für die Knotenumgebung vorhanden, was bedeutet, dass es mit NPM und in Vanille-JavaScript unter Verwendung des CDN-Hosted Axios-Skripts installiert werden kann. Es gibt mehrere Möglichkeiten, Axios JavaScript in Ihrem Projekt zu installieren, wie z. B.:
Verwenden des Node Package Managers (NPM)
Axios steht der NPM -Bibliothek zur Verfügung und kann einfach im Projekt installiert werden, indem der folgende Befehl im Terminal Ihres Codesteditors ausgeführt wird:
$ npm Axios installieren
Verwenden von Bower, um Axios zu installieren
Bower wird in den Massen zunehmend immer berühmter. Bower hilft bei der Installation von Webpaketen genau wie NPM. Wenn Sie mit Bower arbeiten, können Sie Axios mit den folgenden Codezeilen installieren:
$ bower installieren axios
Verwenden eines CDN -Hosted Axios
CDN steht für Content Delivery Networks. Mit diesen Netzwerken können Sie JavaScript -Bibliotheken verwenden, die auf ihren Servern gehostet werden. Axios können in Ihrem Projekt mit einem der beiden CDN -Axios -Anbieter installiert werden, wobei das erste Wesen verwendet wird "Jsdelivr CDN" und der andere ist das "Unpkg" CDN.
Für Jsdelivr CDN Verwenden Sie den Befehl in Ihrer HTML -Datei:
Für die UNPKG CDN Verwenden Sie die Befehl HTML -Datei:
Mit diesen oben genannten Befehlen sollten Sie in Ihren Projekten in der Lage sein, Axios zu installieren und zu verwenden.
Verwenden von Axios in JavaScript
Um die Verwendung von Axios zu demonstrieren, die wir gerade mit einer der oben genannten Methoden in einem JavaScript -Programm installiert haben, benötigen wir eine HTML -Webseite. Für diesen Beitrag schreiben wir die folgenden Zeilen in der HTML -Datei:
Benutzer
Wie Sie im Code bemerken können, haben wir eine nicht ordnungsgemäße Liste erstellt, mit der wir die Liste der Benutzer anzeigen, die wir von der API erhalten.
Dies sollte uns die folgende Webseite auf unserem Browser geben:
Um das Abnehmen von Daten mit den Axios zu demonstrieren, werden wir die verwenden Req | Res API und die URL für die API lautet „https: // reqres.IN/API/Benutzer ”. Der nächste Schritt besteht darin, drei verschiedene Funktionen in unsere JavaScript -Datei zu schreiben:
- fetch_users (): Dadurch wird Axios verwendet, um Daten von der API zu erhalten und die Daten an die Funktion appendTodom () zu senden
- appendTodom (): Dadurch wird der Name des Benutzers zum Benutzern hinzugefügt
- create_li (): Dadurch werden die Daten jedes Benutzers angelegt und ein neues Listenelement erstellt, wobei nur der Name des in ihm platzierten Benutzers:
Die Funktion fetch_user () sieht Folgendes aus:
const fetch_users = () =>Axios.get ("https: // reqres.IN/API/Benutzer ").Dann ((Antwort) =>
const user = Antwort.Daten.Daten;
appendTodom (Benutzer);
)
.fangen ((Fehler) => Konsole.Fehler (Fehler));
;
Die Funktion appendTodom () kann mit den folgenden Zeilen erstellt werden:
const appendTodom = (user) =>const ul = dokument.QuerySelector ("ul");
Benutzer.map ((user) =>
ul.appendChild (create_li (user));
);
;
Und schließlich kann die Funktion create_li () mit den folgenden Codezeilen erstellt werden:
constcreate_li = (user) =>const li = dokument.CreateLement ("li");
li.textContent = '$ Benutzer.ID: $ Benutzer.First_name $ Benutzer.Familienname, Nachname';
Rückkehr li;
;
Nachdem wir alle unsere Funktionen codiert haben, müssen wir nur die Funktion fetch_users aufrufen, aber dafür werden wir in unserer HTML -Datei mit den folgenden Codezeilen eine Schaltfläche hinzufügen:
Nachdem wir unsere Schaltfläche haben, können wir die Funktion fetch_users () auf der Schaltfläche ausführen. Drücken Sie den folgenden Code in unserer Skriptdatei:
$ ("#button").klicken (function ()fetch_users ();
);
Der Füllen Sie den HTML -Code aus ist als:
Benutzer
Der Der vollständige JavaScript -Code ist wie:
$ ("#button").klicken (function ()fetch_users ();
);
constcreate_li = (user) =>
const li = dokument.CreateLement ("li");
li.textContent = '$ Benutzer.ID: $ Benutzer.First_name $ Benutzer.Familienname, Nachname';
Rückkehr li;
;
constappendtodom = (user) =>
const ul = dokument.QuerySelector ("ul");
Benutzer.map ((user) =>
ul.appendChild (create_li (user));
);
;
constfetch_users = () =>
Axios
.get ("https: // reqres.IN/API/Benutzer ")
.Dann ((Antwort) =>
const user = Antwort.Daten.Daten;
appendTodom (Benutzer);
)
.fangen ((Fehler) => Konsole.Fehler (Fehler));
;
Wenn Sie diesen Code ausführen, erhalten Sie das folgende Ergebnis in Ihrem Browser:
Wie Sie sehen können, können wir Daten von der abholen API Bei der Taste drücken Sie mit Verwendung Axios In unserem JavaScript -Code.
Abschluss
Axios ist ein isomorpher HTTP -Client, der sowohl für die Notenentwicklungsumgebung als auch für den Vanille -JavaScript verfügbar ist. Axios ist eine streng vielversprechende Bibliothek und konvertiert automatisch die Daten, die sie aus der API aus dem JSON-Format abrufen. Um Axios in Ihrem Projekt zu verwenden, müssen Sie es entweder in der NPM -Bibliothek installieren oder in Ihrer HTML. In diesem Beitrag haben wir gelernt, wie man Axios in unserem JavaScript -Projekt installiert und ausführt.