Question

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

目前我在行动中重复了很多相同的逻辑，我确信我错过了一些东西。

API响应示例

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

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

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

如果没有在我的任何动作创建者的每次api调用中使用相同逻辑的.catch()，如何执行此操作？

我考虑过使用onError的{{1}}，但据我所知，这不能发出动作。

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调用

1 个答案: