Nuxt•2y ago

Display HTTP POST response error in a component

Hey guys, i'm completely new to frontend development, so i need help with some basic stuff.
I send a POST request to my backend API and i somehow need to handle the API response: On success i want to redirect the user to a different page, and on error i want to display the error in my component. How do i do that?

<template>
    <div class="form-wrapper">
        <div class="form">
            <div class="content">
                <div class="heading-1">Register</div>
                <div class="inputs">
                    <form @submit.prevent="submitForm">
                        <div class="input-wrapper">
                            <input type="email" v-model="formData.email" id="email" class="input-value"
                                placeholder="Email" />
                        </div>
                        <div class="input-wrapper">
                            <input type="password" v-model="formData.password" id="password" class="input-value"
                                placeholder="Password" />
                        </div>
                        <div class="input-wrapper">
                            <input type="password" id="confirm-password"
                                class="input-value" placeholder="Confirm password" />
                        </div>

                        <button type="submit" class="cta-button">Register</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

definePageMeta({
    layout: 'register'
})

const formData = ref({
    email: '',
    password: '',
})

const submitForm = async () => {
    const config = useRuntimeConfig()
    const data = await $fetch(config.public.apiBase + '/register', {
        method: 'post',
        body: {
            "email": formData.value.email,
            "password": formData.value.password
        }
    })
}

</script>

<template>
    <div class="form-wrapper">
        <div class="form">
            <div class="content">
                <div class="heading-1">Register</div>
                <div class="inputs">
                    <form @submit.prevent="submitForm">
                        <div class="input-wrapper">
                            <input type="email" v-model="formData.email" id="email" class="input-value"
                                placeholder="Email" />
                        </div>
                        <div class="input-wrapper">
                            <input type="password" v-model="formData.password" id="password" class="input-value"
                                placeholder="Password" />
                        </div>
                        <div class="input-wrapper">
                            <input type="password" id="confirm-password"
                                class="input-value" placeholder="Confirm password" />
                        </div>

                        <button type="submit" class="cta-button">Register</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

definePageMeta({
    layout: 'register'
})

const formData = ref({
    email: '',
    password: '',
})

const submitForm = async () => {
    const config = useRuntimeConfig()
    const data = await $fetch(config.public.apiBase + '/register', {
        method: 'post',
        body: {
            "email": formData.value.email,
            "password": formData.value.password
        }
    })
}

</script>

pyplacca•4/14/24, 8:09 PM

you need to wrap the fetch in a try catch block

MDN Web Docs

try...catch - JavaScript | MDN

The try...catch statement is comprised of a try block and either a catch block, a finally block, or both. The code in the try block is executed first, and if it throws an exception, the code in the catch block will be executed. The code in the finally block will always be executed before control flow exits the entire construct.

pyplacca•4/14/24, 8:12 PM

alternatively, you can use this approach without the async await keywords

MDN Web Docs

How to use promises - Learn web development | MDN

Promises are the foundation of asynchronous programming in modern JavaScript. A promise is an object returned by an asynchronous function, which represents the current state of the operation. At the time the promise is returned to the caller, the operation often isn't finished, but the promise object provides methods to handle the eventual succe...