使用 redux-thunk 捕获错误答案

【问题标题】：Catch errors using redux-thunk使用 redux-thunk 捕获错误
【发布时间】：2018-10-25 08:55:21
【问题描述】：

我正在使用 redux-thunk 在我的 React 应用程序中进行 API 调用。

每 30 分钟，用户的不记名令牌就会过期，我不会强迫他们再次登录，而是调用 auth/refresh。这很痛苦，因为每次拨打电话时我都需要检查401 error。有没有办法使用 redux/redux-thunk 在一个地方而不是在每次调用中检查这个错误？

我有一个额外的问题，如果发生多次调用，每次都会调用相同的刷新，所以我最终会多次刷新不记名令牌！

我刷新身份验证令牌的操作：

export const refreshAuth = () => {
  return (dispatch, getState) => {
    return axios.post(API.path + 'auth/refresh/?' + API.beaconAPI_client, { 'refreshToken': getState().login.refreshToken })
    .then(response => {
        dispatch({
            type: DO_LOGIN_REFRESH,
            userDetails: response.data
        })
    })
}

}

使用 Axios，如果发生错误，我会这样做：

.catch(error => {
  if(error.response.status === 401){
    this.props.refreshAuth()
    .then(response => {
        /* In the response, make the request again after auth is refreshed */
    })
  }
})

【问题讨论】：

发布您的 thunk 操作，以便我们了解发生了什么。不知道为什么它会在同一时间被多次调用，除非你的代码结构很奇怪
@DominicTobias 它是一个仪表板，其中包含每个都进行 API 调用的组件，因此需要进行检查
您可能需要考虑 redux sagas，它具有像 takeLatest 这样的方法以及许多其他更高级的控制流。或者你可以去抖动const refreshAuth = debounce((...args) => axios.post(...args), 5000);
@DominicTobias debounce 看起来很有趣，但是我不确定如何将其完全实现到 refreshAuth 中，您能否提供一个完整的示例（也许作为答案？）

标签： reactjs redux redux-thunk

【解决方案1】：

您可以使用Axios interceptors 将这些处理程序放在一个位置。

axios.interceptors.response.use(null, error => {
  switch (error.response.status) {
    case 401:
    // [Unauthorized] - Wrong or no authentication ID/password provided
    store.dispatch(actionToRefreshToken());
    break;
  default:
    ...
}

【讨论】：

谢谢。我有许多不同的动作存储在不同的文件中，每个动作都会在适当的时间被调用。是否有一种简单的方法可以捕获所有操作并在后续操作发生之前运行它们？
Axios 拦截器与 Redux 操作无关。在这种情况下，它们只会拦截您的 HTTP 响应。然后由你来拒绝 Promise 并发送相应的操作。