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

Question

我希望这是一个简单的方法：

我正在尝试在ReactJS动作创建器的try和catch语句中实现错误处理。

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

如果请求失败且HTTP状态为401，我想注销该用户。 因此，我需要可以从catch语句访问Http响应标头，并从那里检索HTTP状态。

这可能吗？

Answer 1

根据await MDN docs

等待表达式使异步功能的执行暂停，直到解决了Promise（被实现或被拒绝），并在实现后恢复执行异步功能。 恢复后，await表达式的值就是已实现的Promise的值。

如果Promise被拒绝，则await表达式将抛出被拒绝的值。

因此，如果发生API错误，则会抛出错误对象，您可以在catch块中获得该对象，并可以使用error.response.status和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

catch语句中的e对象是错误对象。 你可以访问与状态代码error.response.status并用头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;
        if (status === 401) {
           dispatch({type:LOG_USER_OUT}) //LOG_USER_OUT is a logout action
        } else {
          dispatch(displayStatus(status, true))
        }
    }
}