Read json response from controller to Axios Catch section - Laravel Vue Axios

Question

I have a method that captures the information sent by the vue view (Profile.vue) through a PUT generated by Axios, the problem lies in the following, when the data is updated (using the myProfile method of the UserController), axios captures the information of the return in json from the method, and the success message is shown, but when there is an error, Axios does not capture the error json information and alleges the following:

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

I understand that you are alleging to me by the variables that I have in the catch section of Axios that do not have information.

myProfile code (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
            ]);
}

Axios section of Profile.vue

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

As I said before, when there is success in the controller, Axios reads and shows the message json, when there is an error, it does not.

Where am I failing that Axios can not show the erro json message coming from the controller?

I used Laravel 5.6, Vuejs 2 and Axios

Answer 1

In the catch callback, the argument is the error object, not the response object. Try this:

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

First - you have to define in your backend that the second part is actually an error, otherwise axios will see it as a successful request.

You do that by putting an error status code as a 2nd argument to response()->json(json, code). You can see a list of status codes here.

Example:

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

Second, axios .catch() returns an error, not the response. In order to get the response, you have to call err.response on it.

Example:

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