如何使用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

Answer 1

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

Answer 2

Add

{{csrf_field()}} 

With your post request to avoid 419 error

Answer 3

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