在 react-redux 应用程序中使用默认错误处理管理 API 调用

Question

我已经完成了我的应用程序，现在我正在为每个异步操作集成真正的 api 调用。我使用 redux-thunk returns 来自 axios 实例的承诺。

目前我在我的行为中重复了太多相同的逻辑，我确信我遗漏了什么。

API 响应示例

{
    "ok": true,
    "warnings": [],
    "errors": [],
    "response": {/* stuff */}
}

我的想法是，如果 axios 调用失败（因此另一个响应状态然后是 2xx），我需要相同的错误处理。此外，当 api 响应 returns "ok": false 时，我还需要做同样的事情。

我最好发送一个向用户显示通知的操作，以便他们也知道何时出现问题。除此之外，我想记录 api 响应的 warnings 和 error 实体。这主要是因为我将使用sentry进行监控。

关于如何在不对每个 api 调用我的任何动作创建者的每个 api 执行相同逻辑的情况下如何做到这一点的任何想法？

我考虑过使用 axios 的 onError，但据我所知，它无法发送操作。

Answer 1

您可以使用 response interceptor 来调度适当的操作。创建商店后只需将它们连接起来

const store = createStore(...)

axios.interceptors.response.use((response) => {
  if (!response.data.ok) {
    store.dispatch({ type: "RESPONSE_NOT_OK", response }
  }

  return response
}, (error) => {
  store.dispatch({ type: "RESPONSE_HAD_ERROR", error }

  return Promise.reject(error)
})

显然，您可以随心所欲地处理响应，这只是为了演示目的。

在 react-redux 应用程序中使用默认错误处理管理 API 调用

Managing API calls with default error handling in react-redux application

redux

redux-thunk

axios