API vom Server anfragen

Um Web-API's anzufragen empfehle ich die JS-Bibliothek axios .

Axios ist eine JS-Bibliothek für HTTP-Anfragen an einen Webserver. Um dies zu installieren muss im Ordner, in dem die package.json-Datei folgenden Befehl ausgeführt werden:

npm install -s axios

Nun legen wir im src-Ordner den Ordner api an. In diesem Ordner erstellen wir die Datei index.js mit folgdenem Inhalt:

import axios from "axios";

export default axios.create({
  baseURL: 'https://example.com/api/', // Diesen String mit dem des Servers austauschen
  withCredentials: true
});

In einer beliebigen Vue-Komponente können wir nun folgden Code ausführen:

<template>
  ...
</template>


<script>
import api from "../api"; // Relativer Pfad zum api-Ordner

export default {
  name: 'Mycomponent',
  data() {
    return {
      bestellungen: []
    }
  },
  methods: {
    fetchBestellungen() {
      api.get("bestellung/") // HTTP GET https://example.com/api/bestellung/
        .then(response => {
          this.bestellungen = response.data;
        })
    },
    erstelleBestellung() {
      api.post("bestellung/", payload) // HTTP POST  https://example.com/api/bestellung/
        .then(response => {
          this.bestellungen.push(response.data) // Beispiel: Erstellte Bestellung kommt als Response und wird der Liste hinmzugefügt
        })
    }
  }
}
</script>

<style>
...
</style>