Formulardaten verarbeiten

Formulardaten mit `fetch` versenden

Anders als in reinem HTML, wo das <form> Tag und der Browser den Versand von Formulardaten übernehmen, wird dieser Schritt in JS Frameworks vielfach manuell gemacht, um mehr Kontrolle über den Prozess zu erhalten.

Über die native JS Funktion fetch kann ein HTTP Request an eine URL gesendet werden. HTTP Requests sind in JS asynchron. Das bedeutet, dass der Browser beim Aufruf von fetch den Request im Hintergrund versendet und währenddessen weiteren Code verarbeitet.

Um diesen asynchronen Code synchron zu verarbeiten, können die async/await Keywords verwendet werden.

// das "async" Keyword wird benötigt, damit im 
// Body der Funktion "await" verwendet werden kann.
async function sendFormData ()
{
    // Dank "await" wird das folgende console.log erst dann ausgeführt
    // wenn die Antwort des Requests erhalten wurde. Das Standardverhalten
    // von JS würde das console.log umgehend ausführen, auch wenn die Antwort
    // vom Server noch "pending", also ausstehend, ist.
    const response = await fetch('/eine-url', {
        method: 'POST',
        body: JSON.stringify({ irgendwelche: 'daten' })
    });
    
    console.log('Antwort erhalten', response);
}

In diesem ÜK musst du keine eigenen Request-Funktionen schreiben. Alle Requests sind für dich vorbereitet. Obenstehendes Beispiel zeigt auf, wie diese Request-Funktionen implementiert wurden.

Selten werden bei einer Anfrage fest definierte Werte an das Backend gesendet. Stattdessen würden die Werte von Formularfeldern, wie im Kapitel Formulare und v-model beschrieben, verwendet.

Fehler abfangen

Es gibt eine Vielzahl von Möglichkeiten, wie ein Request an einen Server fehlschlagen kann. Die Netzwerkverbindung kann unterbrochen sein, der Server ist offline oder die Daten, die im Request versendet werden, sind ungültig.

Alle diese Fehlermöglichkeiten werden von deinem Code im Idealfall richtig gehandhabt.

In diesem ÜK wird das komplette Error-Handling für dich übernommen. Das heisst, du musst die einzelnen Sonderfälle nicht selber abhandeln, sondern erhältst bereits vorbereitete Datenstrukturen mit den aufgetretenen Fehlern.

Um in Vue auf die Fehler Zugriff zu erhalten, musst du lediglich alle Request-Funktionen mit einem try/catch Block umschliessen. Die entstehende Exception enthält eine errors Property, auf der die einzelnen Fehler enthalten sind.

Speichere diese Fehler in eine ref Variable und nutze sie in Vue.

<script setup>
// Die Requests wurden für dich vorbereitet, du musst sie nur importieren.
import { login } from 'api/requests.js'

// Verwende eine errors ref, um die erhaltenen 
// Fehler in Vue zu nutzen.
const errors = ref({})

function onSubmit ()
{
    // Vor dem Absenden können alle bestehenden Fehler gelöscht werden.
    errors.value = {}
    
    try {
        const response = await login()
        
        // Alles OK! Mache etwas mit response:
        // processResponse(response)
    } catch (exception) {
        // Schlägt der Request fehl, können die Fehlerdetails
        // über exception.errors abgefangen werden.
        errors.value = exception.errors
    }
}
</script>

<template>
    <button @click="onSubmit">
        Request absenden
    </button>
    
    <div>
        Erhaltene Fehler: {{ errors }}
    </div>
</template>