Wie Man Eine Post-Anfrage In Javascript Macht

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

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:

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:

Beide Beispiele senden einen Parameter mit dem Namen "date‚" und der Wert "2020-05-15‚" an die angegebene URL.

So stellen Sie eine POST-Anfrage mit axios

Die Syntax fur eine POST-Anfrage ist dieselbe wie fur eine GET-Anfrage axios.post()-Methode anstelle von axios.get().

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:

Schlussfolgerung

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.