CODEWITHSUNDEEP
vue.jsaxios
Carla
Carla

Reputation: 3380

Request aborted from VueJS to a backend REST Service

I'm coding a VueJS CRUD to wrap a REST server Endpoint. I managed to make it work the updateUser/deleteUser but the createUser does not work:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script>
new Vue({
    el: "#app",
    data() {
        return {
            name: '',
            surname: '',
            users: []
        }
    },
    methods: {


        updateUser: function(id) {

            axios.put("/customers?id=" + id + "&name=" + this.name + "&surname=" + this.surname)
                .then(response => {
                    this.listUsers()
                })
            this.name = '';
            this.surname = '';
        },

        deleteUser: function(id) {

            axios.delete("/customers?id=" + id)
                .then(response => {
                    this.listUsers()
                })
        },

        createUser: function() {

            var user = {
                name: this.name,
                surname: this.surname
            };


            axios.post("/customers", JSON.stringify(user), {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    this.listUsers();
                })
                .catch(error => {
                    console.log(error);
                });


        },
        listUsers: function() {
            axios.get("/customers")
                .then(response => {
                    this.users = response.data
                })
        }
    },
    mounted: function() {

        this.listUsers()
    }


})

</script>

When I try to invoke createUser from the submit:

<input type="submit" value="Save" @click="createUser"/>

The following error is reported in the JS Console:

Error: Request aborted
    exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    onabort https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    promise callback*r.prototype.request https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    e https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:8
    exports https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js:2
    createUser http://localhost:8080/?:145
    VueJS 23
        invoker
        _withTask
        add$1
        updateListeners
        updateDOMListeners
        invokeCreateHooks
        createElm
        createChildren
        createElm
        createChildren
        createElm
        createChildren
        createElm
        patch
        _update
        updateComponent
        get
        Watcher
        mountComponent
        $mount
        $mount
        _init
        Vue
    <anonymous>

I have verified that the Rest endpoint works correctly with curl:

curl -X POST http://localhost:8080/customers -H 'Content-Type: application/json'   -d '{"name":"john","surname":"smith"}'

Any idea how to fix it? Just to note, the server endpoint is not reached at all when I call the createUser funciton.

Upvotes: 1

Views: 443

Answers (2)

Venkatesh A
Venkatesh A

Reputation: 2484

When a form element is used - the dom by itself defaults the form to return a submit event. The submit event usually being a GET request sent out (since the default value for the method attribute is GET on the form element). Now this event interferes with the request being sent out by axios as the dom request is always preceding the axios request and since aborting it. Refrain from using form element and default submit buttons if you are using axios or handle them properly using prevent default methods.

Further reading:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

Upvotes: 0

Ahmed Sbai
Ahmed Sbai

Reputation: 16199

I remember that I have faced the same issue try to change your input type :

<input type="button" value="Save" @click="createUser"/>

I don't really have an explanation why type="submit" causes this Request aborted Error

Upvotes: 3

Related Questions