React.js中API错误重定向的优化方法咨询——针对.NET Core API的Post请求错误处理

这问题我之前做React项目对接.NET Core API时也踩过坑，一堆if-else和switch确实越维护越闹心，分享几个我亲测好用的优化思路：

1. 用「状态码-路由映射表」替代条件判断 #

核心思路是把状态码和对应的跳转路径存在一个对象里，不管是设置redirect还是后续重定向，直接查表就行，完全不用写一堆条件分支：

首先定义映射表（可以单独抽成一个配置文件，方便统一维护）：

// 比如放在src/config/redirectConfig.js里
export const statusRedirectMap = {
  401: '/Login',
  404: '/404',
  500: '/500',
  // 以后要加新的状态码，直接在这加键值对就行，比如403: '/Forbidden'
};

然后修改你的catch逻辑：

import { statusRedirectMap } from '../config/redirectConfig';

// ...你的API请求代码
.catch(function (err) {
  // 先判断是否有响应状态码
  const statusCode = err.response?.status;
  // 如果映射表里有对应的路由，就设置redirect
  if (statusRedirectMap[statusCode]) {
    setRedirect(statusCode);
  }
})

最后重定向部分也能大幅简化：

import { statusRedirectMap } from '../config/redirectConfig';

// ...组件代码
const redirectPath = statusRedirectMap[redirect];
if (redirectPath) {
  return <Redirect to={redirectPath} />;
}

return (
  <div>
    //... 正常页面内容
  </div>
);

这种方式的优势是扩展性极强，以后要支持新的错误状态码，只需要在映射表里加一行，不用动业务逻辑代码；而且代码可读性也高，一眼就能看到每个状态码对应跳哪里。

2. 封装全局API响应拦截器（推荐！） #

如果你的项目用了axios这类HTTP客户端，可以直接在响应拦截器里统一处理错误重定向，这样每个API请求都不用单独写catch逻辑了，彻底消除重复代码：

import axios from 'axios';
import { useNavigate } from 'react-router-dom'; // 如果用React Router v6+
import { statusRedirectMap } from '../config/redirectConfig';

// 创建axios实例
const apiClient = axios.create({
  baseURL: '你的.NET Core API地址'
});

// 响应拦截器
apiClient.interceptors.response.use(
  response => response, // 成功响应直接返回
  error => {
    const statusCode = error.response?.status;
    const redirectPath = statusRedirectMap[statusCode];
    
    if (redirectPath) {
      // 用React Router的navigate方法跳转（如果是函数组件）
      const navigate = useNavigate();
      navigate(redirectPath);
      // 如果是类组件，可以用history.push，或者把history实例传入拦截器
    }
    
    // 把错误抛出去，方便组件里做额外处理（比如提示用户）
    return Promise.reject(error);
  }
);

export default apiClient;

之后所有API请求都用这个封装好的apiClient，不用再每个请求写catch和重定向逻辑，全局统一管理，维护起来超省心。

3. 结合React错误边界处理组件级错误 #

如果你的API请求是在组件渲染时发起的（比如useEffect里），还可以用React的**错误边界（Error Boundary）**来捕获错误并统一跳转。不过错误边界主要处理组件渲染过程中的错误，需要把API请求的错误主动抛出到组件树里：

// 自定义错误边界组件
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorStatusCode: null };
  }

  static getDerivedStateFromError(error) {
    // 这里可以解析错误里的状态码
    const statusCode = error.response?.status;
    return { hasError: true, errorStatusCode: statusCode };
  }

  componentDidCatch(error, errorInfo) {
    // 可以在这里上报错误日志
    console.error('组件错误:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      const redirectPath = statusRedirectMap[this.state.errorStatusCode];
      return <Redirect to={redirectPath || '/Error'} />;
    }

    return this.props.children;
  }
}

然后用这个错误边界包裹你的页面组件：

<ErrorBoundary>
  <YourPageComponent />
</ErrorBoundary>

这种方式适合把组件渲染和API请求的错误统一处理，不过需要注意错误边界只能捕获子组件的渲染错误，异步错误（比如API请求）需要手动抛出才能被捕获。

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