HTTP-Anfragen aus Vue.js senden

HTTP-Anfragen aus Vue.js senden

In modernen Webanwendungen ist es oft notwendig, mit APIs zu kommunizieren, um Daten abzurufen oder zu senden. In diesem Artikel erfahren Sie, wie Sie HTTP-Anfragen aus Vue.js heraus senden können. Dabei stellen wir zwei Ansätze vor: Zum einen den in modernen Browsern integrierten fetch()-Mechanismus und zum anderen die Verwendung der Axios-Bibliothek.

1. Verwendung von fetch()

Die Funktion fetch() ist in nahezu allen modernen Browsern eingebaut und ermöglicht es, HTTP-Anfragen ohne zusätzliche Packages zu verschicken. Da fetch() ein Promise zurückgibt, können Sie anschließend then() und catch() verwenden oder die Anfrage in async/await-Blöcken verarbeiten.

Beispiel: Senden einer POST-Anfrage mit JSON-Daten

fetch('https://example.com', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: this.name,
    rating: this.rating,
  }),
})
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

In diesem Beispiel wird eine POST-Anfrage an die angegebene URL gesendet. Die zu sendenden Daten werden zunächst mit JSON.stringify() in einen JSON-String umgewandelt. Die fetch()-Methode kümmert sich darum, dass der Header Content-Type auf "application/json" gesetzt wird.

2. Verwendung von Axios

Axios ist eine beliebte, eigenständige Bibliothek, die ebenfalls HTTP-Anfragen versendet und auf Promises basiert. Im Vergleich zu fetch() bietet Axios einige Vorteile: Es setzt den Content-Type automatisch, wenn Sie ein JavaScript-Objekt als body übergeben, und konvertiert die Daten intern in JSON. Dadurch schreiben Sie weniger Code und die Nutzung ist oft einfacher.

Beispiel: Senden einer POST-Anfrage mit Axios

import axios from 'axios'; // Dies muss zu Beginn Ihres <script>-Bereichs stehen.

axios.post('https://example.com', {
  name: this.name,
  rating: this.rating,
})
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

Wie Sie sehen, sieht der Code deutlich kürzer und übersichtlicher aus. Axios übernimmt intern die Umwandlung des Payloads in JSON und setzt automatisch die entsprechenden Header. Wichtig ist jedoch, dass mit der Nutzung von Axios ein zusätzliches Paket in Ihr Projekt eingebaut wird, was den Gesamtumfang (Bundle Size) Ihrer Anwendung erhöhen kann.

3. Abschließende Betrachtung

Sowohl fetch() als auch Axios basieren auf Promises. Das bedeutet, dass Sie in beiden Fällen die gleichen Methoden (then(), catch()) oder sogar async/await-Syntax verwenden können, um die asynchrone Verarbeitung zu steuern. Die Wahl zwischen fetch() und Axios hängt letztlich von Ihren Projektanforderungen ab:

• Möchten Sie keine zusätzlichen Abhängigkeiten in Ihr Projekt einbinden, ist fetch() eine gute und moderne Option.
• Benötigen Sie dagegen mehr Komfort, eine vereinfachte API und zusätzliche Funktionen, könnte Axios die bessere Wahl sein.

Fazit

Das Senden von HTTP-Anfragen aus Vue.js heraus ist dank fetch() by default sehr einfach möglich. Sollten Sie jedoch den Komfort und die zusätzlichen Features einer externen Library bevorzugen, steht Ihnen auch Axios zur Verfügung. Beide Methoden bieten Ihnen die nötigen Werkzeuge, um effektiv mit APIs zu arbeiten und Ihre Webanwendungen dynamisch zu gestalten.