React/Redux开发中无法捕获异步登录接口错误的解决方法

你拿不到错误响应和try/catch作用域无关，是几个代码逻辑错误导致的：

• catch块中错误引用了try块内的res变量：请求失败抛出异常时，await dispatch(...)不会完成赋值操作，res始终为undefined，错误内容实际存在catch块接收的error形参中。
• 登录thunk中写了完全冗余的try/catch：原catch块内仅做了抛出错误的操作，没有任何额外逻辑，属于无效嵌套。
• 附加问题：thunk成功分支没有返回接口响应数据，就算登录成功，外部拿到的res也是undefined，后续如果需要使用接口返回的其他字段会直接报错。

第一步：修改Redux thunk登录action #

删掉无意义的try/catch嵌套，成功时返回接口响应数据：

export const login = (params: any) => async (dispatch: Dispatch) => {
  const authData = await API.post("login", params);
  sessionStorage.setItem("access_token", authData?.data?.access_token);
  dispatch(ActionCreators.getTokens(authData?.data?.access_token));
  // 返回响应结果供组件调用时使用
  return authData;
};

如果你需要在thunk层做统一的错误日志上报等操作，可以保留catch，但处理完逻辑后必须重新抛出错误，否则组件侧无法捕获异常：

export const login = (params: any) => async (dispatch: Dispatch) => {
  try {
    const authData = await API.post("login", params);
    sessionStorage.setItem("access_token", authData?.data?.access_token);
    dispatch(ActionCreators.getTokens(authData?.data?.access_token));
    return authData;
  } catch (error) {
    // 这里可以加错误日志上报等统一逻辑
    console.error("登录请求失败", error);
    throw error; // 必须重新抛出，组件才能捕获
  }
};

第二步：修改组件内提交逻辑 #

catch块中从error参数读取错误信息，同时加可选链做兜底，避免接口返回结构不符合预期时触发白屏：

const submitHandler = async (e: SyntheticEvent) => {
  e.preventDefault();
  try {
    // 登录成功时res会拿到thunk返回的authData
    const res = await dispatch(
      login({
        email,
        password,
        token,
      })
    );
    router.push("/dashboard");
  } catch (error: any) {
    // 从error对象上取服务端返回的错误信息，加兜底提示
    setError(error?.response?.data?.message || "登录失败，请检查输入后重试");
  }
};

请确认你的Redux Store已经正确注册了redux-thunk中间件：只有thunk中间件支持dispatch异步函数，并且会把异步函数的返回值（也就是你写的thunk的return值）原样返回，未注册thunk的情况下dispatch只会返回普通action对象，无法拿到Promise的执行结果。

内容的提问来源于stack exchange，提问作者Nitsa