javascript - 处理axios错误和响应(vue)仅适用于一个错误。如何通知多个错误？

Question

我有一个Vue应用程序，可与API通信(使用axios请求)并返回错误。
如果我仅收到一个错误，例如在响应如下时，它就可以正常工作:{"error":"passwords.token"}
当我遇到这样的累积错误时:

{"message":"The given data was invalid.",
 "errors":{
   "password":["The password confirmation does not match."]}
}

这是我的Vue组件和方法resetPassword()的代码

methods: {
        resetPassword () {
            this.$vs.loading()

            const payload = {
                userDetails: {
                    email: this.email,
                    password: this.password,
                    password_confirmation: this.password_confirmation,
                    token: this.token
                }
            }

            this.$store.dispatch('auth/resetPassword', payload)
                .then((response) => {
                    this.$vs.loading.close()
                    this.$vs.notify({
                        time: 10000,
                        title: 'Authentication Success',
                        text: response.message.data.message,
                        iconPack: 'feather',
                        icon: 'icon-success-circle',
                        color: 'success'
                    })
                })
                .catch(error => {
                    this.$vs.loading.close()
                    this.$vs.notify({
                        time: 6000,
                        title: 'Authentication Error',
                        text: error.message,
                        iconPack: 'feather',
                        icon: 'icon-alert-circle',
                        color: 'danger'
                    })
                })
        },
    },

Answer 1

我想问题是当您遇到多个错误时，您只会看到一条消息The given data was invalid。

原因如下:

请使用以下语法:

"errors":{
  "password":["The password confirmation does not match."]}
}

您没有像在notify调用中那样正确使用error.message:

this.$vs.notify({
  time: 6000,
  title: 'Authentication Error',
  text: error.message,
  iconPack: 'feather',
  icon: 'icon-alert-circle',
  color: 'danger'
})

您可以做的是始终返回相同的错误数组，即使您遇到一个错误或十个错误也是如此:

"errors": [
  {
    type: "password",
    message: "Wrong password"
  },
  {
    type: "user",
    message: "Wrong user"
  },
  // As recommendation, notify only "Authentication error", instead the specific field
  {
    type: "Authentication error",
    message: "Wrong credentials"
  },
]

您可以通过以下方式通知:

.catch(error => { // You return errors inside error object
  const errors = error.errors; // and you can get it here
  // const { errors } = error; // alternative syntax
  for (let err on errors) {
    this.$vs.notify({
      time: 6000,
      title: 'Authentication Error', // You can use err.type
      text: err.message,
      iconPack: 'feather',
      icon: 'icon-alert-circle',
      color: 'danger'
    })
  }
}

替代方法:

.catch(error => { // You return errors inside error object
  const errors = error.errors; // and you can get it here
  // const { errors } = error; // alternative syntax
  for (let i = 0; i < errors.length; i++) {
    this.$vs.notify({
      time: 6000,
      title: 'Authentication Error', // You can use errors[i].type
      text: errors[i].message,
      iconPack: 'feather',
      icon: 'icon-alert-circle',
      color: 'danger'
    })
  }
}

如果要在错误响应中保留该结构，请检查收到的响应类型并发送通知:

.catch(err => { // You return errors inside error object
  const { error, errors } = err;
  if (error) { // only one error
    this.$vs.notify({
      time: 6000,
      title: 'Authentication Error',
      text: error.message,
      iconPack: 'feather',
      icon: 'icon-alert-circle',
      color: 'danger'
    })
  } else {
    for (let errorType of errors) { // more than one error
      this.$vs.notify({
        time: 6000,
        title: 'Authentication Error',
        text: errors[errorType][0],
        iconPack: 'feather',
        icon: 'icon-alert-circle',
        color: 'danger'
      })
    }
  }
}

这种方法不是一个好主意，但是如果您想使用它，那就很好。