使用rejectWithValue将原始错误对象发送到中间件

Question

我有一个中间件，专门对两种类型的请求状态代码做出反应。我还有一堆看起来像这样的重击：

const updateUser = createAsyncThunk(
  'users/update',
  async (userData, { rejectWithValue }) => {
    const { id, ...fields } = userData
    try {
      const response = await userAPI.updateById(id, fields)
      return response.data.user
    } catch (error) {
      return rejectWithValue({ ...error.response.data, status: error.response.status })
    }
  },
)

我使用

rejectWithValue

将状态代码发送到中间件。但我有点困惑，不知道，在每个请求中使用这样的结构与

try catch

和

rejectWithValue

是一个很好的做法还是有更好的解决方案？

Answer 1

当您使用 try-catch 块和rejectWithValue 处理处理错误的 thunk 时，它很有效，但如果您有许多具有类似错误处理的 thunk，则可能会导致重复代码。管理此问题的更好方法是创建单独的函数或中间件来处理错误。这样，您就可以避免在多个 thunk 中重复相同的错误处理逻辑，从而使您的代码更干净且更易于维护。

让我用一个例子来简化一下：

假设您有几个像 updateUser 这样的 thunk，每个 thunk 都处理 API 请求。您可以创建一个函数来处理错误并重用它，而不是在每个 thunk 中重复错误处理代码。

具体操作方法如下：

const handleRequestError = (error) => {
  if (error.response) {
    // If the error has a response, extract status code and data
    const { status, data } = error.response;
    return { status, data };
  } else {
    // If the error doesn't have a response, it might be a network error
    return { status: 500, data: { message: 'Network Error' } };
  }
};

const updateUser = createAsyncThunk(
  'users/update',
  async (userData, { rejectWithValue }) => {
    const { id, ...fields } = userData;
    try {
      const response = await userAPI.updateById(id, fields);
      return response.data.user;
    } catch (error) {
      const { status, data } = handleRequestError(error);
      return rejectWithValue({ ...data, status });
    }
  },
);