React中Fetch请求的错误捕获及错误页跳转问题

为什么你的.catch块不生效？ #

Fetch API的特性是：只有网络层面的失败（比如断网、域名无法解析）才会触发Promise的reject进入.catch。像404、500这类HTTP状态码错误，Fetch会认为请求已经成功完成（毕竟服务器返回了响应），所以不会自动进入.catch块，这就是你之前错误处理无效的原因。

修改后的Fetch错误处理代码 #

要捕获HTTP错误，需要在第一个.then里主动判断响应状态，不符合预期就抛出错误，这样后续的.catch就能捕获到所有错误（网络错误+HTTP错误）：

import { useNavigate } from 'react-router-dom'; // 假设用React Router v6

function getSearchResult() {
  const navigate = useNavigate(); // 在组件内获取navigate函数

  fetch(apiUrl)
    .then(res => {
      // 检查HTTP响应是否成功（状态码200-299）
      if (!res.ok) {
        // 抛出包含状态码的错误对象，方便后续处理
        throw new Error(`请求失败，状态码：${res.status}`);
      }
      return res.json();
    })
    .then(data => setSearchResult(data))
    .catch(error => {
      // 这里可以捕获所有类型的错误
      console.error('请求出错:', error.message);
      // 直接跳转到错误页
      navigate('/error');
    });
}

关键说明 #

• 捕获HTTP错误：通过res.ok判断请求是否成功，若为false则主动throw错误，把HTTP错误转化为Promise的reject，让.catch能捕获到。
• 错误页跳转：如果使用React Router，在函数组件中通过useNavigate钩子获取跳转函数，在.catch块里调用navigate('/error')即可；如果是类组件，可以通过this.props.history.push('/error')实现跳转。
• 获取详细错误信息：如果需要更多错误细节（比如响应头、错误内容），可以在抛出错误前先读取响应的错误文本：

  throw new Error(`请求失败：${res.status} - ${await res.text()}`);
  

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