Question

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

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

我理解你是通过我在Axios的catch部分中没有信息的变量来向我宣告的。

myProfile代码（UserController）

$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无法显示来自控制器的erro json消息？

我使用了Laravel 5.6，Vuejs 2和Axios

Answer 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

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

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

2 个答案: