未捕获的类型错误:axios__WEBPACK_IMPORTED_MODULE_1__.default.get(...).then(...).error不是函数

kmbjn2e3  于 2023-05-17  发布在  iOS
关注(0)|答案(1)|浏览(413)

我试图在vue 3中构建一个项目,用于前端和后端的spring Boot 。我正在使用axios发送请求,但每当我调用axios.get时,就会弹出此错误,但API调用仍在进行中,后端功能运行良好。但此错误困扰着我,我不知道如何解决它。救命啊!!error from consoleenter image description here

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

我试图关闭cosr从crome扩展

nfeuvbwi

nfeuvbwi1#

您遇到的错误是由于代码中的打字错误。在axios中处理错误的正确函数是.catch()而不是.error()。示例:

axios.get(`http://localhost:6969/sendmail/${this.dt.userEmail}`)
.then((response)=>console.log(response))
.catch((error)=>console.log(error));

如果你想知道为什么它在错误的情况下仍然工作,那是因为你的请求通过了,你收到了一个成功的响应,这将引导你到.then()语句,但你仍然得到了错误。

相关问题