使用try和catch语句处理异步HTTP错误

Question

I hope this is an easy one:

I am trying to implement error handling within a try and catch statement in a ReactJS action creator.

export const getUserKitchens = () => async dispatch => {
    try{
        const response = await axios.get(
            `${baseURL}customer/get-user-kitchens/`,
         )
        dispatch({type:LOAD_USER_KITCHENS, payload: response.data})
    } catch(e) {
        const msg = "something"
        dispatch(displayStatus(msg, true))
    }
}

If the request fails with an HTTP status of 401 I want to log out the user. Therefore, I need to have access to the Http response headers from the catch statement and retrieve the HTTP status from there.

Is this possible?

Answer 1

According to await MDN docs

The await expression causes async function execution to pause until a Promise is resolved, that is fulfilled or rejected, and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise.

If the Promise is rejected, the await expression throws the rejected value.

So if there is an API error, the error object is being throws which you get in the catch block and can access the status and headers from it with error.response.status and error.response.headers

export const getUserKitchens = () => async dispatch => {
    try{
        const response = await axios.get(
            `${baseURL}customer/get-user-kitchens/`,
         )
        dispatch({type:LOAD_USER_KITCHENS, payload: response.data})
    } catch(e) {
        const status = e.response.status;
        dispatch(displayStatus(status, true))
    }
}

Answer 2

The e object in the catch statement is an error object. You could access the status code with error.response.status and the headers with error.response.headers . Something like this should be useful:

export const getUserKitchens = () => async dispatch => {
    try{
        const response = await axios.get(
            `${baseURL}customer/get-user-kitchens/`,
         )
        dispatch({type:LOAD_USER_KITCHENS, payload: response.data})
    } catch(e) {
        const status = e.response.status;
        if (status === 401) {
           dispatch({type:LOG_USER_OUT}) //LOG_USER_OUT is a logout action
        } else {
          dispatch(displayStatus(status, true))
        }
    }
}