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

没有不同的键，因为一次将是一个错误，而另一次将是两个或三个。例如不要：1个错误：{错误：“错误消息”}2个错误：{错误：{“ error_1”：“错误消息1”}}如您所见，多数民众赞成非常复杂。只需将一个syndax放在其中，然后跟随它即可，即使它是一两个左右。例如，您可以使它像

errors: [
   {type: "wrong_user_name_or_password", message: "Wrong user name or password"}
]

然后，您可以美化您的notify函数来循环所有错误，并像 无法登录。原因：

errors.message

Answer 2

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

这是原因：

使用此语法：

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

您没有正确使用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'
    })
  }
}

Answer 3

对于API响应，我使用原始Laravel的ResetsPassword.php中的sendResetFailedResponse方法，它看起来像：

protected function sendResetFailedResponse(Request $request, $response)
    {
        if ($request->wantsJson()) {
            throw ValidationException::withMessages([
                'email' => [trans($response)],
            ]);
        }

        return redirect()->back()
                    ->withInput($request->only('email'))
                    ->withErrors(['email' => trans($response)]);
    }

我已经在我的API / ResetPasswordController.php中重写了此方法，如下所示：

use ResetsPasswords;

    protected function sendResetResponse(Request $request, $response)
    {
        $email = $request['email'];
        return response(['message' => $response]);
    }

    protected function sendResetFailedResponse(Request $request, $response)
    {
        return response(['error' => $response],422);
    }