Vue JS API Abfrage mit Axios und Laravel

Eine häufige Frage ist, wie man an externe API Daten mit Vue JS kommt. Und das möchte ich anhand eines Beispiels mit Laravel, Axios und Vue JS verdeutlichen. Um API-Anfragen mit VueJS, Laravel und Axios durchzuführen, muss zunächst sichergestellt werden, dass alle erforderlichen Pakete bei Vue installiert sind. Dies sind natürlich VueJS und auch Axios.

npm install axios

Nachdem du das Paket “axios” installiert hast, kannst du mit der Implementierung beginnen. Hier ist ein Beispiel für eine API-Anfrage an eine fiktive API unter /api/data.

In Vue.JS erstellen wir eine Methode, um eine API-Anfrage auszuführen:

methods: {
    fetchData() {
        axios.get('/api/data')
            .then(response => {
                this.data = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
}

Dies ruft die Route /api/data auf, die im Laravel-Backend definiert sein sollte. Wenn die Anfrage erfolgreich war, wird die Antwort in der Variablen data gespeichert. Tritt ein Fehler auf, wird dieser in der Konsole ausgegeben.

In Laravel kann die Route und die Controller-Methode wie folgt definiert werden, um auf die Anfrage zu antworten:

// api.php
// Importiere den DataController hier

Route::get('/api/data', [DataController::class, 'index']);



// DataController.php
class DataController extends Controller
{
    public function index()
    {
        $data = Data::all();
        return response()->json($data);
    }
}

Dies definiert eine Route, die auf /api/data reagiert und die index-Methode des DataControllers aufruft. In dieser Methode wird die Instanz des Datenmodells abgerufen und als JSON-Antwort zurückgegeben.