从控制器读取 json 响应到 Axios Catch 部分 - Laravel Vue Axios

Posted 2023-03-14

【中文标题】从控制器读取 json 响应到 Axios Catch 部分 - Laravel Vue Axios

【英文标题】：Read json response from controller to Axios Catch section - Laravel Vue Axios

【发布时间】：2018-09-24 22:29:51

【问题描述】：

我有一个方法，通过axios生成的一个PUT来捕获vue视图（Profile.vue）发送的信息，问题出在以下，当数据更新时（使用UserController的myProfile方法）， axios从方法中抓取返回的json信息，显示成功，但是出现错误时，axios没有抓取错误的json信息，报如下：

Uncaught (in promise) TypeError: Cannot read property 'status' of undefined

我了解您是通过我在 Axios 的 catch 部分中没有信息的变量来向我指控的。

我的个人资料代码（用户控制器）

$profile = User::find(Auth::user()->id);
$profile->firstname = $request->firstname;
$profile->lastname = $request->lastname;
$profile->gender = $request->gender;
$profile->description = $request->description;
if($profile->update())

    return response()->json([
            'status' => 'Muy bien!',
            'msg' => 'Datos actualizados correctamente.',
            'cod' => 201
    ]);

else
        return response()->json([
            'status' => 'Ocurrio un error!',
            'msg' => 'Ocurrio un error al actualizar la información.',
            'cod' => 400
            ]);

Profile.vue 的 Axios 部分

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

前面说了，控制器成功时，axios读取并显示消息json，出错时不显示。

Axios 无法显示来自控制器的错误 json 消息我在哪里失败？

我使用 Laravel 5.6、Vuejs 2 和 Axios

【参考方案1】：

在catch 回调中，参数是错误对象，而不是response 对象。试试这个：

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

SOURCE

【参考方案2】：

首先 - 您必须在后端定义第二部分实际上是一个错误，否则 axios 会将其视为成功请求。

您可以通过将错误状态代码作为第二个参数添加到response()->json(json, code) 来做到这一点。可以看到状态码列表here。

例子：

return response()->json([
    'status' => 'Ocurrio un error!',
    'msg' => 'Ocurrio un error al actualizar la información.',
    'cod' => 400
], 400);

其次，axios .catch() 返回错误，而不是响应。为了得到响应，您必须致电err.response。

例子：

.catch((response) => 
    let title = response.response.data.status;
    let body = response.response.data.msg;
    this.displayNotificationError(title,body);
)

【讨论】：

现在我明白了，但我在错误消息中有问题，现在显示 de toast 通知，但在实验室中没有文本错误消息，chrome 控制台显示此“PUT localhost:8000/dashboard/profile500（内部服务器错误）”我是 laravel vue 的新手

不确定，您必须阅读错误。您可以在 storage/logs/laravel.log 文件或开发者工具的响应预览中阅读它。