使用 Axios 从 laravel 控制器捕获错误答案

【问题标题】：Capture error from laravel controller with Axios使用 Axios 从 laravel 控制器捕获错误
【发布时间】：2018-09-25 16:10:55
【问题描述】：

¿我如何使用 Axios 从 Laravel 中的控制器方法中捕获错误？问题如下，当数据通过laravel中UserController中myProfile方法的validator并且正确时，方法中会生成一个json响应，然后axios将其取走并显示toast Success消息，但是当我通过时错误或空数据到验证器，这会失败，Axios 不会接收带有错误的 json，而是向我显示空 toast 并在控制台中生成错误 422。

用户控制器中的myProfile

public function myProfile(Request $request)
{
    $valido = $this->validate($request, [
        'firstname' => 'required|min:3|max:15',
        'lastname' => 'min:2|max:15',
        'gender' => 'numeric',
        'description' => 'max:200',
    ]);

    if($valido){
        return response()->json([
            'status' => 'success',
            'msg' => 'Ok',
        ], 201);
    }
    else{
        return response()->json([
            'status' => 'error',
            'msg' => 'Error',
        ], 422);
    }

}

Profile.vue（Axios 部分）

updateUser(){
        const value = {
            'id': this.user.id,
            'firstname': this.user.firstname,
            'lastname': this.user.lastname,
            'gender': this.user.gender,
            'description': this.user.description,
        } 

        axios.put('/dashboard/profile', value)
            .then((response) => {
                let title = response.data.status;
                let body = response.data.msg;
                this.displayNotificationSuccess(title, body);
            })
            .catch((error) => {
                let title = error.response.data.status;
                let body = error.response.data.msg;
                this.displayNotificationError(title,body);
            })
    }

axios从控制器捕获json成功时的屏幕截图

Screenshot when Axios capture Success request

Axios 未从控制器捕获 json 错误时的屏幕截图

Error

来自控制台的屏幕截图，显示 json 错误没有被 axios 捕获

Error 422 in console

¿我怎样才能解决这个问题？我使用 Laravel 5.6、Vuejs 2 和 Axios

【问题讨论】：

控制器请求验证将在失败时抛出异常并立即返回响应。如果您查看控制台中的 422 响应，您会发现结构与您的预期不同。
@fubar，是的，我明白这一点，但是¿我该如何解决正在发生的事情？我是 Laravel 和 Vue 的新手
您可以在控制器中捕获异常，并返回您自己的错误响应。或者你调整 Axios 的 catch 函数来处理当前返回的 422 响应。
好的，¿你是怎么做到的？

标签： json laravel laravel-5 vuejs2 axios

【解决方案1】：

如果将validate() 方法调用包装在try/catch 块中，则可以捕获请求无效时抛出的ValidationException。这将允许您返回自己的响应。

我已经向您展示了下面的示例，并且还包括验证错误，如果您希望在前端输出这些错误。

<?php

use Illuminate\Validation\ValidationException;

public function myProfile(Request $request)
{
    try {
        $this->validate($request, [
            'firstname'   => 'required|min:3|max:15',
            'lastname'    => 'min:2|max:15',
            'gender'      => 'numeric',
            'description' => 'max:200',
        ]);

        return response()->json([
            'status' => 'success',
            'msg'    => 'Okay',
        ], 201);
    }
    catch (ValidationException $exception) {
        return response()->json([
            'status' => 'error',
            'msg'    => 'Error',
            'errors' => $exception->errors(),
        ], 422);
    }
}

【讨论】：

非常感谢@fubar！