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

Posted 2023-02-22

【中文标题】在 react-redux 应用程序中使用默认错误处理管理 API 调用

【英文标题】：Managing API calls with default error handling in react-redux application

【发布时间】：2017-11-28 03:00:05

【问题描述】：

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

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

API 响应示例

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

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

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

关于如何在不使用 .catch() 的情况下对我的任何动作创建者中的每个 api 调用使用相同逻辑的任何想法？

我曾考虑过使用axios 的onError，但据我所知，这无法调度操作。

【参考方案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)
)

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

【讨论】：

谢谢！有什么方法可以将 api 调用特定的参数传递给拦截器，以便在事情变坏或不坏的时候？

你能给我一个 api 调用特定参数的例子吗？回调中的response 和error 参数都有一个request 字段，它是生成响应的请求。 Here is the docs on what is available on that.

基本上我想为我的拦截器提供一个“消息”参数，以便拦截器可以将它传递给创建向用户显示消息的通知的操作。因此，对于登录，它可能是“无法登录”，但对于创建帖子，它可能是“无法创建帖子”等。希望这很清楚:)

我没有尝试过，但我怀疑添加到request config（例如axios.get('/example', myValue: "test" )）的任何附加值都可以在请求字段（例如response.request.myValue）的拦截中访问。试一试，告诉我进展如何。