Question 223123 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Grabbing the Data from an Axios API call error

I am working on an app that on occasion deals with bad data (the data architect is aware, but won’t be fixing it any time soon). The resulting bad data is causing a 404 errors when I call to the record. When I run the API call in postman, it still returns a 404 error, but passes the status and message as a data payload.
I am looking for a way to grab the status and message from the data element so I can display the message in the client. I would rather just do the error handling on the front-end and populate a message if no data is returned, but my project lead insists on doing it server side.

this is the type of response I am getting from axios. when I check in the console.

Unhandled Promise rejection: Request failed with status code 404 ; Zone: <root> ; Task: Promise.then ; Value: 
AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code: "ERR_BAD_REQUEST"config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}message: "Request failed with status code 404"name: "AxiosError"request: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: '(redacted from privacy)', __zone_symbol__loadendfalse: Array(1), __zone_symbol__ON_PROPERTYloadend: ƒ, __zone_symbol__ON_PROPERTYabort: ƒ, …}response: 
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
data: {status: 0, message: 'Data is not found'}
headers: {cache-control: 'no-cache, no-store, max-age=0, must-revalidate', connection: 'keep-alive', content-type: 'application/json', date: 'Thu, 03 Aug 2023 21:06:06 GMT', expires: '0', …}
request: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: 'http://localhost:8080/labtrax/api/maintain/equipment/getById/?id=6', __zone_symbol__loadendfalse: Array(1), __zone_symbol__ON_PROPERTYloadend: ƒ, __zone_symbol__ON_PROPERTYabort: ƒ, …}
status: 404
statusText: ""
[[Prototype]]: Object
[[Prototype]]: Error
constructor: ƒ AxiosError(message, code, config, request, response)
toJSON: ƒ toJSON()
isAxiosError: true
[[Prototype]]: Object 
undefined

Here is my API call:

React.useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
         const res = await axios.get(`${detailsUrl + selectedRecord.id}`);
         setValues( res.data );
      } catch (error) {
         setValues( error.response.data ); // Added this line
         console.error(error.message);
      }
      setLoading(false);
    };
    fetchData();
  }, []);

I have tried calling to values.message as well as values.data.message, but nothing seems to populate. How can I grab the message so I can display it in the client? Can someone please tell me what I am doing wrong?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Simply add setValues(error.response.data) inside the catch to access the data from the error response.


  2. 0

    add console.log(res) in your try block and console.log(error) in catch block.

    after that as per the log extract the desired value you want.

    example message = res.data or anything else

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search