在 React 中，我如何处理从服务器返回的错误？答案

【问题标题】：In React, how do I handle errors coming back from the server?在 React 中，我如何处理从服务器返回的错误？
【发布时间】：2019-11-22 14:31:50
【问题描述】：

我的应用中有一个注册表单，用于将数据提交到我的后端服务器，其中包含一个调用我的 API 并处理返回数据的 Redux thunk。现在它实际上只捕获发生在 React/Redux 中的错误。如果服务器返回错误，我的操作创建者会认为该错误是用户记录的一部分并验证我的“用户”，即使我提交了一个空表单。

我的handleSubmit 函数（从我的 AuthForm 组件中提取）：

 const handleSubmit = e => {
    e.preventDefault();
    onAuth(formType, state);
    setState(formType === 'login' ? initialStateLogin : initialStateSignup);
    history.push("/");
  }

我的 onAuth 函数（映射到我的 authUser Redux thunk）：

export function authUser(type, userData) {
  return dispatch => {
      return apiCall("post", `/users/${type}`, userData)
        .then(({ jwt, ...user }) => {
          console.log(jwt, user)
          localStorage.setItem("jwtToken", jwt);
          setAuthorizationToken(jwt);
          dispatch(setCurrentUser(user));
          dispatch(removeError());
        })
        .catch(err => {
          console.log(err);
          dispatch(addError(err.message));
        });
  };
}

我的 apiCall 辅助函数：

export async function apiCall(method, path, data) {
  try {
    const res = await axios[method.toLowerCase()](`${API_PATH}${path}`, data);
    return res.data;

  }
  catch(err) {
    console.log(err);
    return err.response.data || "An unknown error occurred";
  }
}

如果我提交一个空表单，我的 Redux 状态如下所示：

currentUser {
  isAuthenticated: true,
  user: {
    error: {
      message: "Could not create user. Please modify parameters and try again."
    }
 }
}

【问题讨论】：

标签： reactjs redux error-handling

【解决方案1】：

您正在捕捉 API 调用的错误。这会导致您的 catch 回调永远不会触发。删除 apiCall 中的 try/catch 块。

或者，您可以返回带有错误数据的Promise.reject()。

【讨论】：