如何在页面展示API响应的特定消息并修正授权接口的逻辑分支问题

看起来你遇到的核心问题是API返回非2xx状态码时会直接进入catch块，但你希望能捕获到业务返回的错误信息，而不是统一提示；另外还要区分「未授权」和「Ride不存在」两种场景的提示。我来一步步帮你解决：

1. 先搞清楚为什么Ride Not Found会进入catch #

大部分HTTP请求库（比如Axios）会把状态码非2xx的响应（比如404、403）当作错误抛入catch块，哪怕服务器返回了结构化的错误信息。这就是为什么你明明拿到了带message的响应，却走到了catch里。

2. 修正逻辑：捕获业务错误并展示特定消息 #

我们需要在catch里区分两种情况，同时在then块里处理授权成功/未授权的场景，最终返回结构化的结果给页面层展示：

export const authUser = (rideId, action) => {
  return (dispatch, getState) => {
    const postData = {
      consumer: "Rapi",
      classId: rideId,
      action: action,
    };
    return Api.post('/api/xx/yy/auth', postData)
      .then((response) => {
        const apiData = response.data;
        // 场景1：授权成功
        if (apiData.authorized === true) {
          console.log("User is authorized");
          return { success: true, message: "授权成功" };
        } 
        // 场景2：API返回2xx但用户未授权
        else {
          console.warn("User is NOT authorized");
          return { success: false, message: "您没有权限访问该Ride" };
        }
      })
      .catch((error) => {
        console.error("Authorization failed:", error);
        // 场景3：服务器返回了业务错误（非2xx状态码，但有响应内容）
        if (error.response) {
          const errorData = error.response.data;
          // 直接提取API返回的message展示给用户
          return { success: false, message: errorData.message || "请求失败，请稍后重试" };
        } 
        // 场景4：纯网络错误（无服务器响应，比如断网、超时）
        else {
          return { success: false, message: "网络连接异常，请检查网络后重试" };
        }
      });
  };
};

3. 页面层如何处理并展示对应消息 #

当你在组件里调用这个action后，根据返回的结构化结果展示不同内容：

// 示例：在React组件中调用
authUser(yourRideId, 'view')
  .then(result => {
    if (result.success) {
      // 授权成功：执行页面跳转/加载内容等逻辑
      navigate('/ride-detail');
    } else {
      // 用你项目里的提示组件展示消息（比如Toast、Modal、Alert）
      showToast(result.message);
    }
  });

额外优化建议 #

• 如果可以协调API团队调整：建议把「Ride不存在」这类业务逻辑错误返回2xx状态码，放在then块处理，这样逻辑会更统一。如果不能改API，上面的方案完全可行。
• 可以利用errorCode做更细粒度的控制：比如针对60000（Ride不存在）做特殊处理（比如引导用户返回Ride列表）：

  // 在catch的error.response分支里
  if (errorData.errorCode === "60000") {
    return { 
      success: false, 
      message: errorData.message,
      type: 'ride-not-found' // 标记错误类型，方便页面做特殊逻辑
    };
  }
  

内容来源于stack exchange