API 的第一个响应未更新错误消息 Vue Axios答案

【问题标题】：First response from API not updating error message Vue AxiosAPI 的第一个响应未更新错误消息 Vue Axios
【发布时间】：2021-04-18 09:24:57
【问题描述】：

我无法在第一次提交点击时显示错误响应。

错误消息仅在单击提交按钮两次后才会弹出。响应 400 肯定是在第一次点击时创建的。第二个触发正确的消息。

<div class="danger-alert" v-html="error" />

这是脚本：

 export default {
    name: 'register',
    data() {
      return {
        model: {
          username: '',
          email: '',
          password: '',
          agree: false,
        }
      }
    },
    methods: {
      async onSubmit() {
        try {
          const response = await AuthenticationService.register({
            username: this.model.username,
            email: this.model.email,
            password: this.model.password,
            agree: this.model.agree
          })

          this.$router.push('/login')
        
        } catch (error) {
          console.log(error)
          this.error = error.response.data.error
        }
      }
    }
  }
</script>

async register (req, res) {
    try {
      const user = await User.create(req.body)
      const userJson = user.toJSON()
      res.send({
        user: userJson,
        // token: jwtSignUser(userJson)
      })
      // res.send('Sign Up successfully')
    } catch (error) {
      console.log(error)
      res.status(400).send({
        error: 'This account is already in use.'
      })
    }
  }

【问题讨论】：

你能在浏览器中显示来自开发者工具的网络请求日志吗？（“网络”标签等）
@trainoasis 添加到描述中
第一个请求的响应是什么，也是 POST 吗？还是选项？
@trainoasis POST 和响应是 400 重复（这是正确的），但它没有在第一个响应时更新前端...
似乎不是 400，因为它在网络请求列表中不是红色的 hm？此外，如果 400 您确定您的服务器是可访问的并且您正在请求正确的 url？例如，我会首先通过浏览器检查使用 GET 请求。并使用 Postman 或类似工具进行调试 - 在您得到这样的基本响应之前，我不会深入研究服务器代码

标签： vue.js axios

【解决方案1】：

想通了。错误处理需要在 data.model 之外。

export default {
    name: 'register',
    data() {
      return {
        model: {
          username: '',
          email: '',
          password: '',
          agree: false,
        },
        error: null
      }
    },
    methods: {
      async onSubmit() {
        try {
          const response = await AuthenticationService.register({
            username: this.model.username,
            email: this.model.email,
            password: this.model.password,
            agree: this.model.agree
          })

          this.$router.push('/login')
        
        } catch (error) {
          console.log(error.response.data.error)
          this.error = error.response.data.error
        }
      }
    }

【讨论】：