not able to catch error in axios react.js

Question

I am making API call using axios in reactjs project but somehow I am not able to catch the error. I am getting 404 but not able to catch it. can somebody tell me what's wrong?

abc.js

export default axios.create({
  baseURL: `my_base_url`,
  headers: {
    "Content-Type": "application/json",
  },
});

xyz.js

export const createProcessApiCall = (param) => {
  return API.post("/v1/process1", param);
};

zzz.js

  const postData = async (param) => {
    await createProcessApiCall(param)
      .then((response) => {
          setApiData(response.data.data);
          setIsSuccess(response.data.isSuccess);    
      })
      .catch((e) => {
        setIsError(true);
      });
  };

Because it's not really an error. axios only raise error if the error is, let say, network error or such. 404 error, on the other hand, mean that the request was delivered. Read this question — kunquan
– kunquan, Commented Dec 23, 2020 at 12:57

T.arar · Accepted Answer · 2020-12-23 13:01:15Z

3

you are combinining async code with sync code, try to use either asynchron :

   const postData = async (param) => {
    try {
       const result = await createProcessApiCall(param)
    }
    catch(err) {
         setIsError(true);
 
    }   
    };

Or synchron :

const postData = (param) => {
    createProcessApiCall(param)
      .then((response) => {
          setApiData(response.data.data);
          setIsSuccess(response.data.isSuccess);    
      })
      .catch((e) => {
        setIsError(true);
      });
  };

answered Dec 23, 2020 at 13:01

T.arar

1215 bronze badges

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

Comments

Marcus Yoda · Accepted Answer · 2020-12-23 13:05:22Z

0

Any status code different the sequence included between 200-299, you need to get at catch:

  const postData = async (param) => {
    await createProcessApiCall(param)
      .then((response) => {
          setApiData(response.data.data);
          setIsSuccess(response.data.isSuccess);    
      })
      .catch((e) => {
        // @TODO parse err
        console.log(e.response);
        setIsError(true);
      });
  };

answered Dec 23, 2020 at 13:05

Marcus Yoda

2411 silver badge8 bronze badges

Comments

Neezar · Accepted Answer · 2020-12-23 13:29:53Z

0

axios.interceptors.response.use(res=>{return res}, (error) => {
 if (error.response.status !== 401) {
   throw error;
}

if (typeof error.response.data.error.name !== "undefined") {
   //do something on the error
}
});

its better to use axios interceptor to catch the error

answered Dec 23, 2020 at 13:29

Neezar

561 gold badge1 silver badge4 bronze badges

Collectives™ on Stack Overflow

not able to catch error in axios react.js

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related