Home / Questions / 155826
Accepted
Felipe
Asked: 2020-04-15 10:46:24 +0800 CST 2020-04-15 10:46:24 +0800 CST

在 Axios Laravel Vue 中读取 json 响应

  • 772

我有一个方法，通过axios生成的一个PUT捕获vue视图（Profile.vue）发送的信息，问题出在以下，当数据更新时（通过UserController控制器的myProfile方法），axios捕获方法返回json的信息，显示成功信息，但是出现错误时，axios没有捕捉到错误json信息，告诉我如下：

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

我了解您声称我在 Axios 捕获的变量中没有信息

myProfile 的代码如下：

    $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

laravel

1 Answers

  1. Best Answer

    问题是你没有status code从 Laravel 传递给你的响应，所以它总是会得到一个状态200，OK正是因为这个原因，它永远不会进入catchfrom axios 。

    为了解决状态码，它通过->json()以下方式作为第二个参数传递给函数。

    response()->json([], statuscode)

    完整的代码列表在Symfony\Component\HttpFoundation\Response

    所以你的解决方案是。

    拉拉维尔

    if($profile->update())
{
    return response()->json([
        'status' => 'Muy bien!',
        'msg' => 'Datos actualizados correctamente.',
    ],201);
}
else{
    return response()->json([
        'status' => 'Ocurrio un error!',
        'msg' => 'Ocurrio un error al actualizar la información.',
    ],400);
}

    爱讯

    axios.put('/putroute')
   .then(response => {
       console.log(response);
    })
   catch(error => {
        //obtener el status _(error 400)
        console.log(error.response.data.status);
   })
    • 3