React Native, Axios and Unhandled Promise Rejections

Question

I am using Axios in my React-Native app to communicate with a Nodejs backend, and am using react-redux dispatch to call the actions that will utilize Axios. However, no matter what I try I land up getting "Unhandled Promise Rejection" anytime there is an error of any sort. This is frustrating me so much I'm about to give up on Axios and just go back to using fetch. I've googled this problem (which seems to be very common indeed), but have not found any solid solution yet.

Here is an example of how I'm using Axios in my actions to send requests to my Nodejs backend server:

    export const getAppointments = (userId) => {
  return async (dispatch) => {
      const request = axios
        .get(`${SERVER_BOOKINGS}/upcoming_appointments/${userId}`)
        .then((response) => {
          let ourPayload = {};
          ourPayload.success = response.data.success;
          if (ourPayload.success) {
            ourPayload.bookings = response.data.bookings;
            dispatch({
              type: GET_UPCOMING_APPOINTMENTS,
              payload: ourPayload,
            });
          } 
        })
        .catch((err) => {
          console.log("caught an error, HERE:", err);             
          //throw err
        });   
  };
};

And here is the code I'm using to call this action:

 const getAppointments = async () => {
    try {
      await dispatch(
        bookingActions.getAppointments(userObject.userData.userId)
      );
    } catch (error) {
      console.log("we actually caught an axios error client side!");
    }
  }

If I leave the code exactly as above and I deliberately cause an error response from my Nodejs code , I get a console.log message saying "caught an error, HERE", but get nothing from the catch block where I actually dispatch the action (2nd block of code).

If I uncomment out the throw err line in the first catch block, I still get the console.log, still get nothing from the second catch block.... but now I get an Unhandled Promise Rejection warning.

Right now, this code works very well as long as there isn't an error, and is completely worthless anytime there is an one. In all honestly, I don't know whether the issue is one with axios, react-redux dispatch or just a failure on my part to understand the way Promises are meant to work, but I've wasted untold hours trying to figure out what should be a really simple matter of catching errors... and I'm falling behind schedule on this project because of it. Any advice/help would be greatly appreciated!

D10S D10S · Accepted Answer · 2020-06-15T07:42:36

I think that the problem is caused since "bookingActions.getAppointments" is not a Promise function so there is no need to "try-catch" it. try to change it like this:

const getAppointments = () => dispatch(bookingActions.getAppointments(userObject.userData.userId));

React Native, Axios and Unhandled Promise Rejections

1 Answers