axios 从VueJS到后端REST服务的请求已中止

ou6hu8tu  于 2023-01-25  发布在  iOS
关注(0)|答案(1)|浏览(118)

我正在编写一个VueJS CRUD来 Package 一个REST服务器端点。我设法让它工作updateUser/deleteUser,但createUser不工作:

<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>

当我尝试从submit:

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

JS控制台中报告以下错误:

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>

我已经验证了Rest端点可以正确使用curl:

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

知道如何修复它吗?只是要注意,当我调用createUser函数时,根本没有到达服务器端点。

w8f9ii69

w8f9ii691#

我记得我遇到过同样的问题尝试改变你的input类型:

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

我真的无法解释为什么type="submit"导致此请求中止Error

相关问题