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

Question

我正在尝试在 vue 3 中为前端构建一个项目，在后端构建一个 spring boot 项目。我正在使用 axios 发送请求，但每当我调用 axios.get 时，都会弹出此错误，但 api 调用尚未完成，并且后端功能运行良好。但此错误一直困扰着我，我很困惑如何解决它。请帮忙！！ 来自控制台的错误 在此输入图片描述

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

我尝试从 crome 扩展中关闭 cosr

Answer 1

您遇到的错误是由于代码中的拼写错误造成的。 axios 中处理错误的正确函数是

.catch()

而不是

.error()

。 示例：

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

如果您想知道为什么尽管出现错误但它仍然有效，那是因为您的请求已通过并且您收到了成功的响应，这会导致您看到

.then()

语句，但您仍然收到错误。