如何使用 Redux createAsyncThunk 访问后端错误答案

【问题标题】：How to access backend errors with Redux createAsyncThunk如何使用 Redux createAsyncThunk 访问后端错误
【发布时间】：2021-06-26 05:21:51
【问题描述】：

我不确定当 POST 请求发送到后端时，我应该如何获取来自后端的错误。如果我使用普通的 axios 调用，我可以简单地从 catch 块中的响应对象中获取错误：

error.response.data.errors

但是当使用 Redux 并使用 createAsyncThunk 方法时，在来自服务器的 400 状态代码上，调度了一个被拒绝的操作，并且我得到的错误对象是一个通用的对象，如下所示：

{
  message: "Request failed with status code 400"
  name: "Error"
  stack: "Error: Request failed with status code 400\n...."
}

如何获取服务器错误，就像使用 axios 一样？

【问题讨论】：

标签： redux react-redux redux-toolkit

【解决方案1】：

我认为您可以做的是添加额外的错误检查，并使用 try catch 块包装 axios 发布请求。注意：在您的情况下，请求失败，所以我想您提出请求的方式一定有一些错误。

【讨论】：

stackoverflow.com/questions/66435276/…
我做了类似的事情。

【解决方案2】：

您可以利用 redux-toolkit 中的 rejectWithValue 函数将服务器错误作为您拒绝操作的有效负载属性。

应该是这样的（未经测试的代码，因为我在手机上）

const myAction = createAsyncThunk(
  ‘actionName’,
  async ( arg, {rejectWithValue} ) => {
    try {
      const res = await axios.post(…);
      return res.data;
    } catch (error) {
       return rejectWithValue( error.response.data.errors );
    }
});

【讨论】：