How to access error response from server using javascript / axios

Question

I am using axios to post form data to Laravel.

Currently I am able to access the response if successful, however I'm having trouble accessing the error response. In dev tools, I can see my network > response has the following:

{"success":false,"data":{"message":"Token mismatch","refresh":true}}

I'm trying to access refresh to do a boolean comparison, so if its true the page will reload. How do I access this?

I've tried the following:

console.log(error.response);
console.log(error.response.data);
console.log(error.response.data.message);
console.log(error.data);
console.log(error);

Which log as the following respectively:

[object Object]
[object Object]
undefined
undefined
Error: Request failed with status code 419

Parse the JSOn in order to work with the returned data

Kevin.a
– Kevin.a

2019-09-16 11:18:42 +00:00
Commented Sep 16, 2019 at 11:18 — Kevin.a
– Kevin.a, Commented Sep 16, 2019 at 11:18

antonku · Accepted Answer · 2019-09-16 11:27:26Z

4

It seems that your server response contains data key. Axios also uses this key to in order to separate application data from HTTP protocol status and headers.

Assuming that you want to get message from the error response (that is "Token mismatch") try to access it using the following path:

error.response.data.data.message

edited Sep 16, 2019 at 11:27

answered Sep 16, 2019 at 11:18

antonku

7,7252 gold badges18 silver badges22 bronze badges

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

Comments

Ashiqur Rahman · Accepted Answer · 2019-09-16 11:23:48Z

1

Add

{{csrf_field()}}

With your post request to avoid 419 error

answered Sep 16, 2019 at 11:23

Ashiqur Rahman

4247 silver badges21 bronze badges

2 Comments

ImranR Over a year ago

Thanks, yes I already have a csrf field, but for the purpose of testing (removing cookies to bypass an age gate) I had to catch this error to force a page refresh / or do something else.

Ashiqur Rahman Over a year ago

Ok thanks. I think you have found your answer. 🙂🙂

fahadNoor · Accepted Answer · 2019-09-16 11:21:53Z

0

As per the [https://github.com/axios/axios#handling-errors] documentation the error is available in the response. use try catch instead

try {
    apiRes = axios.get('https://www.apponative.con');
  } catch (err) {
    console.error("Error response:");
    console.error(err.response.data);    // ***
    console.error(err.response.status);  // ***
    console.error(err.response.headers); // ***
  } finally {
    console.log(apiRes);
  }

answered Sep 16, 2019 at 11:21

fahadNoor

11 silver badge2 bronze badges

Collectives™ on Stack Overflow

How to access error response from server using javascript / axios

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related