Vue-Kommunikation über Fetch und Axios

Das JavaScript-Framework Vue.js, Teil 17 Vue-Kommunikation über Fetch und Axios

31.10.2022 Von Dr. Dirk Koller

Anbieter zum Thema

PresseBox - unn | UNITED NEWS NETWORK GmbH

In größeren Projekten wird Vue.js vorwiegend als Frontend eingesetzt. Die Kommunikation mit Backend und APIs anderer Service-Anbieter erfolgt über HTTP-Aufrufe, meist im JSON-Format. Hier realisieren wir solche HTTP-Requests mit der JavaScript-Fetch API sowie dem HTTP-Client Axios.

Die Open Source-Bibliothek Axios ist auf HTTP-Requests spezialisiert und integriert einfach mit Vue-Projekten.
(Bild: Axios)

Fetch: Einfach und einsatzbereit

Der einfachste Weg, HTTP-Aufrufe zu formulieren, ist die JavaScript-Fetch-API, die zumindest von allen modernen Browser unterstützt wird. Fetch setzt, anders als der Vorgänger XMLHttpRequest, auf sogenannte Promises. Im Folgenden ist der Aufbau eines Fetch-Aufrufs wiedergegeben:

fetch(url [options])
.then(function() {

})
.catch(function() {

});

Fetch erwartet als ersten Parameter den Pfad zur Resource, die aufgerufen werden soll. Der zweite Parameter ist optional und ermöglicht das Konfigurieren des Requests. Angegeben werden können in Form eines Objekts zum Beispiel HTTP-Methode, Header, Body, Credentials, Mode, oder Redirect. Eine Aufzählung aller Eigenschaften findet sich in der Dokumentation zur Fetch-API.

Als Ergebnis des Requests erhält man ein Promise, das im Erfolgsfall zu einem Response-Objekt aufgelöst wird und auf das hinter then() zugegeriffen werden kann. Wenn der Aufruf fehlschlägt, wird das Promise zurückgewiesen und man landet in der catch()-Methode.

Das folgende Codestück zeigt ein konkretes Beispiel für einen Aufruf der offenen Wetter-API von brightsky.dev:

function callService() {
  fetch('https://api.brightsky.dev/weather?lat=52&lon=7.6&date=2020-04-21')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("Ein Fehler ist aufgetreten"));
}

Wie der Code erkennen lässt, muss man bei Verwendung der Fetch-API mit der json()-Methode selber dafür sorgen, dass die JSON-Antwort in ein JavaScript-Objekt umgewandelt wird.

Selbstverständlich sind auch Post-Aufrufe möglich. Dabei kommt jetzt der optionale zweite Parameter der fetch-Funktion zum Einsatz. Im folgenden Beispiel werden die HTTP-Methode POST, zwei Header und die Übergabe von Daten im Body formuliert.

async function sendPerson() {
  const response = await fetch(
    'http://localhost:8080/persons',
    {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ firstname: 'Max', lastname: 'Mustermann' })
    }
  );
  if (!response.ok) {
    console.log("Fehler wird geworfen");
    throw new Error(`Ein Fehler ist aufgetreten`);
  }
}

Wie man am Beispiel sieht, arbeitet die Fetch-API auch ohne Probleme mit async/await zusammen. Wegen await pausiert die asynchrone Funktion, bis das Promise erfüllt ist. Das Reponse-Objekt wird dann, wenn der Request abgeschlossen ist, response zugewiesen. Da hier keine catch()-Methode vorhanden ist, wird das reponse-Objekt mit ok() auf eventuelle Fehler untersucht.

Die Fetch-API hat den Vorteil in gängigen Browsern enthalten zu sein. Es muss also keine zusätzliche Bibliothek importiert und betreut werden. Für einfache Anwendungsfälle ist das auf jeden Fall eine Option. Es gibt aber Fälle, wo Fetch an Grenzen kommt. Wer zum Beispiel ältere Browser unterstützen muss, braucht eine andere Lösung.

Axios: beliebt und leistungsstark

Die bekannteste Alternative zu Fetch ist die auf HTTP-Requests spezialisierte Open-Source-Bibliothek Axios. Das Einbinden in die Vue-App erfolgt am einfachsten mit npm:

npm i axios

Der einfache GET-Aufruf von oben sieht mit Axios formuliert folgendermaßen aus:

import axios from "axios";
…
function callServiceAxios() {
  axios.get('https://api.brightsky.dev/weather?lat=52&lon=7.6&date=2020-04-21')
    .then(res => { console.log(res.data) })
    .catch((error) => console.log("Ein Fehler ist aufgetreten"));
}

Die Aufrufe ähnlich sich, bei näherer Betrachtung fallen aber einige wichtige Unterschiede auf. Bei Axios erfolgt die Umwandlung der JSON-Antwort automatisch, der json()-Aufruf entfällt. Das ist nicht ganz so entscheidend, spart aber Code. Wichtiger ist das Verhalten im Fehlerfall. Der Promise im Fetch-Aufruf wird nur bei Problemen mit dem Netzwerkzugriff zurückgewiesen. Für andere fehlerhafte HTTP-Codes (4xx und 5xx) wird der Promise erfüllt und man landet in der then-Methode. Dort kann/muss man dann mit response.ok prüfen, ob nicht doch ein Problem auftrat.

Axios verhält sich in diesem Fall stimmiger, hier wird das Promise nicht erfüllt und somit catch() ausgeführt. Auch der Axios-Client lässt sich mit weiteren Parametern an die Erfordernisse anpassen. Der POST-Request von oben sieht mit Axios folgendermaßen aus:

const options = {
  url: 'http://localhost:8080/persons',
  method: 'POST',
  headers: {
      'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  data: {
    firstname: 'Max',
    lastname: 'Mustermann'
  }
};

axios(options)
  .then(response => {
    console.log(response.status);
  });

Neben der Unterstützung älterer Browser und der automatischen Umwandlung der JSON-Antwort bietet Axios aber noch weitere Vorteile. Beispielsweise ist es sehr einfach, ein Timeout zu setzen. Dazu wird die optionale Property timeout im Config-Objekt gesetzt:

function callServiceAxios() {
  axios.get('http://localhost:8080/persons', {timeout: 2000})
    .then(res => { console.log(res.data) })
    .catch((error) => console.log("Ein Fehler ist aufgetreten:" + error));
}

Wird hier nach zwei Sekunden keine Antwort erhalten, wird der Request mit einem Fehler (timeout of 2000ms exceeded) abgebrochen.

Ebenfalls sehr hilfreich ist die Möglichkeit, Requests und/oder Reponses mit einem Interceptor abzufangen. Ein gängiger Anwendungsfall dafür ist zum Beispiel das Zufügen eines Authentifizierungstokens zum Header des Requests:

axios.interceptors.request.use(function (config) {
  config.headers['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

Die Liste der Axios-Features lässt sich noch fortsetzen. Wer beispielsweise den Fortschritt eines Downloads visualisieren muss, ist mit Axios ebenfalls gut beraten. In Summe ist Axios die mächtigere und beliebtere Lösung. Hier bleiben kaum Wünsche offen.

(ID:48567195)

Das JavaScript-Framework Vue.js, Teil 17 Vue-Kommunikation über Fetch und Axios

Fetch: Einfach und einsatzbereit

Axios: beliebt und leistungsstark

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu Softwareentwicklung und DevOps

Einwilligung in die Verwendung von Daten zu Werbezwecken

Karrierechancen