Question

我想在服务器输出401错误时处理它，我想调度一个动作来做到这一点。我看到许多人正在使用axios.interceptors我该怎么做。什么是拦截器？请详细说明它是什么并帮助我。我是react-redux框架的新手。这是我在Express中的路线处理程序：

router.get('/api/me', function(req, res) {

        if(req.user) {
            res.status(200).send({
                email : req.user.local.email,
                isCurrentUser: true
            });
        }else {
            res.status(401).send({
                isCurrentUser: false
            })
        }



})

这是我的异步操作创建者：

export const fetchCurrentUser =  () => {

    return async (dispatch) => {

        const res =  await axios.get(`${ROOT_URL}/me`); 
        if(res.status === 200) {
              dispatch({ type: types.YES_FETCH_CURRENT_USER, payload: res.data });
        }else if(res.status === 401) {
             dispatch({type: types.NO_FETCH_CURRENT_USER})
        }


    }

};

Answer 1

拦截器是axios中的东西。您可以将拦截器与express中的中间件进行比较。您使用拦截器

在执行请求之前将其拦截。
在您将其作为Promise处理之前，先拦截响应。

有关其用法的文档可以在here中找到。

在您的情况下，您可以执行以下操作：

const aiosInstance = axios.create();

axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 401) {
      // dispatch something to your store
    }

    return Promise.reject(error);
  }
)

axiosInstance.get(`${ROOT_URL}/me`);

上面的示例确实意味着您必须导入redux store实例以直接对此执行操作。

根据以下对话，

已编辑我的答案：

尝试：

export const fetchCurrentUser =  () => async (dispatch) => {
  try {
    const res = await axios.get(`${ROOT_URL}/me`); 

    dispatch({ type: types.YES_FETCH_CURRENT_USER, payload: res.data });
  } catch (err) {
    dispatch({type: types.NO_FETCH_CURRENT_USER})
  }
};

在axios react-redux应用程序中处理401未经授权的错误

1 个答案: