VueJS调用REST接口创建用户时请求中止问题求助

问题根源 #

你使用了<input type="submit">按钮触发createUser方法，点击时浏览器会默认触发表单的提交行为，导致页面立即刷新，从而中断了axios发起的POST请求，这就是后端完全收不到请求的原因。而update/delete功能正常，大概率是因为它们的按钮不是submit类型，没有触发表单默认提交。

解决方案 #

方案1：阻止按钮的默认表单提交行为 #

在@click指令后添加.prevent修饰符，阻止浏览器的默认提交动作：

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

方案2：将按钮类型改为普通按钮 #

把type="submit"改成type="button"，这样按钮就不会触发表单默认提交：

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

额外优化（可选） #

axios的post方法可以直接传入JavaScript对象，不需要手动调用JSON.stringify，axios会自动帮你序列化并设置正确的Content-Type请求头，同时可以在请求成功后清空输入框，和update方法保持一致：

createUser: function() {
    var user = {
        name: this.name,
        surname: this.surname
    };

    axios.post("/customers", user)
        .then(response => {
            this.listUsers();
            this.name = '';
            this.surname = '';
        })
        .catch(error => {
            console.log(error);
        });
}

验证 #

修改后再测试createUser功能，axios的POST请求会正常发送到后端，不会被页面刷新中断，和你用curl测试的效果一致。

内容的提问来源于stack exchange，提问作者Carla