Wie Man Eine Post-Anfrage In Javascript Macht
__del__ |
__delete__ |
ast Python module |
code Python module |
COM PHP module |
dis Python module |
DOM PHP module |
Ev PHP module |
Event PHP module |
exp |
http Python module |
imp Python module |
io Python module |
JavaScript |
json Python module |
Mail PHP module |
os Python module |
platform Python module |
PS PHP module |
Python functions |
random Python module |
Rar PHP module |
re Python module |
resource Python module |
site Python module |
SPL PHP module |
StackOverflow |
string Python module |
Strings PHP module |
Sync PHP module |
time Python module |
UI PHP module
Michael Zippo
04.11.2021
Wenn Sie eine Webanwendung erstellen, möchten Sie möglicherweise eine HTTP-Anforderung ausfuhren, um auf eine externe Ressource zuzugreifen. Angenommen, Sie erstellen einen Blog. Möglicherweise möchten Sie eine API aufrufen, um eine Liste von Kommentaren abzurufen, die in jedem Blogpost angezeigt werden.
Axios ist eine beliebte JavaScript-Bibliothek, mit der Sie Webanfragen stellen können. In diesem Leitfaden erklären wir, wie Sie mit Axios eine GET-Anfrage stellen. Wir gehen einige Beispiele durch, um zu zeigen, wie axios funktioniert und wie Sie es in Ihrem Code verwenden können.
Warum Axios?
Axios ist eine auf Versprechen basierende Bibliothek, die es ermöglicht einfach, Webanfragen zu stellen.
Sie fragen sich vielleicht: Warum sollte ich axios gegenuber einer der vielen anderen Webanfragebibliotheken verwenden? Es stimmt, dass es andere Bibliotheken wie fetch gibt, die Sie fur GET-Anfragen verwenden können, aber axios hat eine Reihe von Vorteilen, die diese Bibliotheken nicht haben.
Axios unterstutzt ältere Browser, die ermöglicht es Ihnen, eine zugänglichere Benutzererfahrung zu schaffen. Axios verfugt außerdem uber einen integrierten CSRF-Schutz, um Schwachstellen zu verhindern. Es funktioniert auch in Node.js, was es großartig macht, wenn Sie sowohl Front-End- als auch Back-End-Webanwendungen entwickeln.
So installieren Sie Axios
Bevor Sie eine GET-Anfrage mit axios, mussen Sie die Bibliothek installieren. Sie können dies mit dem folgenden Befehl tun:
Dieser Befehl installiert axios und speichert es in Ihrer lokalen package.json-Datei. Jetzt sind Sie bereit, die axios-Bibliothek zu verwenden.
So stellen Sie eine Anfrage mit Axios
Die ersten Schritte mit axios sind einfach. Um eine Webanfrage zu stellen, mussen Sie lediglich die URL angeben, von der Sie Daten anfordern möchten, und die Methode, die Sie verwenden möchten.
Angenommen, Sie möchten eine Liste mit zufälligen Fakten uber Katzen aus dem cat-facts API. Wir könnten dies mit diesem Code tun:
Dieser Code gibt eine Zusage zuruck, die eine Anfrage darstellt, die noch nicht erfolgt ist noch abgeschlossen. Um Daten aus dieser HTTP-Anfrage abzurufen, verwenden Sie eine async/await-Funktion wie folgt:
Der Server hat geantwortet th eine Liste von cat-facts.
Wenn wir diese Funktion aufrufen, wird eine HTTP-GET-Anfrage an die cat-facts-API gestellt. Wir verwenden eine Async/Await-Funktion, damit unser Programm nicht fortgesetzt wird, bis die Webanfrage abgeschlossen ist. Dies liegt daran, dass axios zuerst ein Versprechen zuruckgibt. Es gibt die Daten aus der Anfrage zuruck, die es stellt, nachdem diese Anfrage abgeschlossen wurde.
Die axios-Bibliothek enthält einige Kurzbefehle, mit denen Sie Webanfragen stellen können:
- axios.get()
- axios.post()
- axios.delete()
- axios.put()
- axios.patch()
- axios.options()
In diesem Tutorial konzentrieren wir uns auf die axios.get ()- und axios.post()-Methoden, die dieselbe grundlegende Syntax wie alle anderen Kurzschriftmethoden verwenden.
GET-Anfragen mit axios stellen
In unserem letzten Beispiel haben wir axios verwendet, um eine GET-Anfrage zu stellen. Es gibt jedoch eine einfachere Möglichkeit, eine GET-Anfrage mit axios zu stellen: mit axios.get().
Angenommen, Sie möchten eine Liste mit Katzenfakten abrufen, dann zählen Sie, wie viele zuruckgegeben wurden. Sie können dies mit dem folgenden Code tun:
Der Code hat diese Antwort generiert: 225 Katzenfakten wurden zuruckgegeben.
Lassen Sie uns unseren Code aufschlusseln. Wir haben zuerst eine asynchrone Funktion namens getCatFacts() deklariert, in der wir eine Webanfrage stellen.
Wir verwenden dann axios.get(), um eine Liste von Cat-Fakten von der cat-facts-API abzurufen; "response.data‚" enth√§lt die Antwortobjekte und den Anfragetext unserer Anfrage.
Schlie√ülich verwenden wir das .length-Attribut, um zu berechnen, wie viele Katzenfakten von unserer Anfrage zuruckgegeben wurden. Diese Zahl fugen wir dann in die Zeichenfolge "Katzenfakten wurden zuruckgegeben‚" hinzu.
Senden von Headern mit axios
Wenn Sie eine GET-Anfrage stellen, mussen Sie möglicherweise einen benutzerdefinierten Header an die Webressource senden, an die Sie die Anfrage richten. Angenommen, Sie rufen Daten von . ab eine API, die eine Authentifizierung erfordert. Möglicherweise mussen Sie einen Authentifizierungsheader angeben.
< p>Um einen Header mit einer axios-Anfrage anzugeben, können Sie den folgenden Code verwenden:
Dieser Code wurde den Header "header-name&rdquo . senden ; mit dem Wert "Header-Wert‚" an die von uns angegebene URL.
Senden von Parametern mit axios
Viele APIs ermöglichen es Ihnen, Parameter in einer GET-Anfrage zu senden. Mit einer API können Sie beispielsweise die Anzahl der zuruckgegebenen Antworten mithilfe eines Grenzwertparameters begrenzen.
Die Angabe eines Parameters, der mit einer Webanfrage gesendet werden soll, ist mit axios einfach. Sie können den Parameter entweder als Abfragezeichenfolge einschließen oder die params-Eigenschaft verwenden. Hier ist ein Beispiel fur axios, das eine Webanfrage unter Verwendung von Abfragezeichenfolgen zur Angabe eines Parameters sendet:
Alternativ können Sie mit diesem Code eine params-Eigenschaft in den Axios-Optionen angeben:
Angenommen, Sie möchten eine Post-Anfrage an eine API senden. Sie können dies mit diesem Code tun:
Sie k√∂nnen Header und Parameter auf die gleiche Weise wie bei einer GET-Anfrage angeben. Nehmen wir an, Sie m√∂chten den Header "Name‚" mit dem Wert senden "James‚" mit Ihrer POST-Anfrage. Sie k√∂nnen dies mit diesem Code tun:
Die axios-Bibliothek wird verwendet, um Webanfragen in JavaScript zu stellen. Es kann sowohl im Frontend mit JavaScript als auch im Backend mit einer Plattform wie Node.js verwendet werden. Im Gegensatz zu anderen Web-Request-Bibliotheken verfugt axios uber einen integrierten CSRF-Schutz, unterstutzt ältere Browser und verwendet eine Promise-Struktur. Es ist perfekt, um Web-Anfragen zu stellen.
Jetzt sind Sie bereit, GET- und POST-Anfragen mit axios wie ein professioneller Webentwickler zu stellen.
