Vue3+SpringBoot项目axios.get报错:error不是函数问题求助
问题描述
我正在开发一个前端基于Vue3、后端基于SpringBoot的项目,使用axios发送HTTP请求。每次调用axios.get接口时,控制台会抛出错误:
Uncaught TypeError: axios__WEBPACK_IMPORTED_MODULE_1__.default.get(...).then(...).error is not a function
尽管API调用仍能正常触发,后端功能也运行正常,但该错误始终存在。我尝试过使用Chrome插件关闭CORS,但问题未解决。以下是我的代码:
<template> <div class="text-center"><h1 class="text-bg-dark">User Registration</h1></div> <div> <form class="form-control text-center" @submit.prevent="register"> <label for="userEmail">Enter your email:</label><br /> <input type="email" name="userEmail" id="userEmail" class="border-3" v-model.lazy="dt.userEmail" /><br /> <label for="userPassword">Enter your password:</label><br /> <input type="password" name="userPassword" id="userPassword" v-model.lazy="dt.userPassword" /><br /> <label for="confirmPassword">Enter your password again:</label><br /> <input type="password" name="confirmPassword" id="confirmPassword" v-model.lazy="dt.confirmPassword" /><br /> <label for="userNumber">Enter Contact Number</label><br /> <input type="number" id="userNumber" v-model.lazy="dt.userNumber" /><br /> <label for="userAddress">Enter your Address</label><br /> <input type="text" id="userAddress" v-model.lazy="dt.userAddress" /><br /> <label for="userCity">Pincode</label><br /> <input type="number" id="userCity" v-model.lazy="dt.userCity" /><br /> <br /> <button type="submit">Submit</button> </form> </div> <div> <otpVerify v-if="registered" :email="dt?.userEmail" @back="back" /> </div> </template> <script> import axios from "axios" import otpVerify from '../components/otpVerify.vue' export default { components:{ otpVerify }, data() { return { registered: false, dt: { userEmail: "", userPassword: "", confirmPassword: "", userNumber: "", userAddress: "", userCity: "", }, }; }, methods: { back(){ this.registered=false; }, register() { if ( this.dt.userEmail == "" || this.dt.userPassword == "" || this.dt.confirmPassword == "" || this.dt.userNumber == "" || this.dt.userAddress == "" || this.dt.userCity == "" ) { alert("Please fill all the fields"); } else { if (this.dt.userPassword == this.dt.confirmPassword) { axios.get(`http://localhost:6969/sendmail/${this.dt.userEmail}`) .then((response)=>console.log(response)) .error((error)=>console.log(error)); this.registered= !this.registered; } else { alert("Passwords do not match"); } } }, }, }; </script> <style></style>
解决方案
错误的核心原因是:axios的Promise链式调用没有.error()方法,正确的错误捕获方法是使用.catch()。
只需将代码中的.error((error)=>console.log(error))替换为.catch((error)=>console.log(error)),即可消除该错误。
修改后的关键代码片段:
axios.get(`http://localhost:6969/sendmail/${this.dt.userEmail}`) .then((response) => console.log(response)) .catch((error) => console.log(error));
内容的提问来源于stack exchange,提问作者Aditya
相关产品推荐
相关产品推荐

