React Native中Fetch API如何在转JSON前校验HTTP状态码

这个场景我太熟悉了——之前做项目时也踩过把HTTP错误和系统异常混在catch里的坑，既不好区分处理，还给用户的提示也模糊。分享几个实用的方案，完美满足你“保留catch处理未预期异常，同时精准处理状态码”的需求：

方案1：利用response.ok快速判断状态范围 #

浏览器的Fetch API提供了response.ok属性，当HTTP状态码在200-299之间时会返回true，否则为false。我们可以在第一个then里先做这个判断，把非2xx的状态单独处理，再决定是否转JSON：

fetch('your-api-endpoint')
  .then(response => {
    if (!response.ok) {
      // 先尝试获取后端返回的错误文本（如果有的话）
      return response.text().then(errorContent => {
        // 抛出包含状态码和错误信息的自定义错误
        throw new Error(`HTTP ${response.status}: ${errorContent || '未返回错误详情'}`);
      }).catch(() => {
        // 如果后端没返回任何文本（比如401直接跳转前的空响应），直接抛状态码相关错误
        throw new Error(`请求失败：状态码 ${response.status}`);
      });
    }
    // 状态正常，转为JSON数据继续处理
    return response.json();
  })
  .then(parsedData => {
    // 处理正常返回的业务数据
    console.log('获取数据成功:', parsedData);
  })
  .catch(error => {
    // 这里只处理两类异常：
    // 1. 上面抛出的HTTP状态相关错误
    // 2. 网络错误、JSON解析失败等未预期的系统异常
    if (error.message.startsWith('HTTP') || error.message.includes('状态码')) {
      // 给用户展示精准的业务错误提示
      alert(`请求出错：${error.message}`);
    } else {
      // 处理系统级异常，比如断网、JSON格式错误
      alert('请求失败，请检查网络连接或稍后重试');
      console.error('未预期的异常:', error);
    }
  });

方案2：针对特定状态码做精细化处理 #

如果需要对401（未授权）、403（无权限）、400（参数错误）等特定状态码做不同的用户提示，可以直接判断response.status，做更细粒度的处理：

fetch('your-api-endpoint')
  .then(response => {
    switch (response.status) {
      // 正常状态，直接转JSON
      case 200:
      case 201:
        return response.json();
      // 未授权，提示用户重新登录
      case 401:
        throw new Error('登录已过期，请重新登录');
      // 无权限，提示用户权限不足
      case 403:
        throw new Error('您没有权限执行此操作');
      // 资源不存在，提示用户检查请求
      case 404:
        throw new Error('请求的资源不存在');
      // 参数错误，尝试解析后端返回的错误详情
      case 400:
        return response.json().then(errorData => {
          throw new Error(`参数错误：${errorData.msg || '请检查输入内容'}`);
        }).catch(() => {
          throw new Error('参数错误，请检查输入内容');
        });
      // 其他非2xx状态，统一处理
      default:
        return response.text().then(errorText => {
          throw new Error(`请求错误 ${response.status}: ${errorText || '未知错误'}`);
        });
    }
  })
  .then(parsedData => {
    // 处理正常数据
    console.log('数据:', parsedData);
  })
  .catch(error => {
    // 统一展示用户友好的提示
    alert(error.message);
    // 对未预期的异常（比如网络错误）记录日志
    if (!['登录已过期', '您没有权限', '参数错误', '资源不存在'].includes(error.message)) {
      console.error('系统异常:', error);
    }
  });

核心思路 #

把HTTP状态码的业务错误在第一个then中就通过throw抛出，这样catch块只需要负责处理系统级异常（比如网络断开、JSON解析失败），既能给用户展示精准的错误提示，又不会让catch块变得臃肿混乱。

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