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

aprouja1 · Accepted Answer · 2018-04-14 21:26:38Z

5

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

answered Apr 14, 2018 at 21:26

aprouja1

1,82011 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DevK · Accepted Answer · 2018-04-14 21:32:16Z

3

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

answered Apr 14, 2018 at 21:32

DevK

10k2 gold badges33 silver badges51 bronze badges

2 Comments

Felipe Over a year ago

Now i understanding but i have problem in error message, now show de toast notification but without text error message in the labe, and chrome console showme this ´PUT localhost:8000/dashboard/profile 500 (Internal Server Error)´ I am new in laravel vue

DevK Over a year ago

Not sure, you'll have to read the error. You can read it in storage/logs/laravel.log file or in the response preview in developer tools.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related