Why async inertiajs request from js code does not work?

Question

I have Laravel 11 / vuejs 3 / element-plus 2.9.5" app I make request to save form as from my vue file :

    const onSubmit = () => {
        console.log(editMode.value)

        if (editMode.value) {
            console.log(form.title) // I SEE THIS MESSAGE
            const updateTask = async () => {

                // BUT I DO NOT SEE THESE MESSAGES BELOW_AND_NO_REQUEST_TO_SERVER
                console.log('form.title::')
                console.log(form.title)

                console.log('form.id::')
                console.log(form.id)

                const formData = new FormData();
                formData.append('title', form.title);
                ...
                formData.append("_method", 'PUT');

                try {
                    await router.post(router('admin.tasks.update', form.id), formData, {
                        preserveUrl: true,
                        preserveState: true,
                        preserveScroll: true,
                        onSuccess: (page) => {
                            console.log('UPDATE page::')
                            console.log(page)

                            resetFormData();
                            Swal.fire({
                                toast: true,
                                icon: "success",
                                position: "top-end",
                                showConfirmButton: false,
                                title: page.props.flash.success
                            });
                        }
                    })
                    console.log('AFTER UPDATE::')

                } catch (err) {
                    console.log(err)
                }
            }
        }// editMode.value

    }  // const onSubmit = () => {

I found this example in net - suppose I need to make async request ?

What code is correct ?

I got the Idea : I do not actually need to define updateTask method or use async in calling request method:

UPDATED BLOCK:

So I remade onSubmit :

const onSubmit = () => {
    if (editMode.value) {

            console.log('form.id::')
            console.log(form.id)


            const formData = new FormData();
            formData.append('title', form.title);
            formData.append('task_category_id', form.task_category_id);
            formData.append('priority', form.priority);

            formData.append('content', form.content);
            formData.append('completed', form.completed);
            formData.append('deadline_at', form.deadline_at);
            formData.append("_method", 'PUT');

            router.post(router('admin.tasks.update', form.id), formData, {
                    preserveUrl: true,
                    preserveState: true,
                    preserveScroll: true,
                    onSuccess: (page) => {
                        console.log('UPDATE page::')
                        console.log(page)

                        resetFormData();
                        Swal.fire({
                            toast: true,
                            icon: "success",
                            position: "top-end",
                            showConfirmButton: false,
                            title: page.props.flash.success
                        });
                    }
                })
            console.log('AFTER UPDATE::')

    }// editMode.value

}  // const onSubmit = () => {

But I got error :

What is this error and how it can be fixed ?

Answer 1

updateTask won't run unless you call the function expression

Just a note, router.post does not return a promise, and therefor is not affected by await so you might as well remove the function expression entirely.

You're already applying onSuccess which will trigger after router has posted.