Redux-saga中call effect捕获错误时如何获取响应状态码？

我之前也碰到过一模一样的问题！核心原因其实是原生fetchAPI的特殊行为——它只会在真正的网络故障（比如断网、域名不存在）时抛出TypeError，像401、404这类HTTP状态码错误，它并不会自动触发catch逻辑。这就是为什么你在catch里只能拿到模糊的"Failed to fetch"提示，根本拿不到状态码。

解决方案：手动检查HTTP响应状态，抛出包含状态码的自定义错误 #

我们需要在call获取到response后，先主动判断响应是否成功，再手动抛出包含状态码的错误对象，这样catch块就能捕获到完整的错误信息了。

完整代码示例：

try {
  const response = yield call(fetch, uri, options);
  
  // 关键步骤：判断HTTP响应是否成功（状态码200-299）
  if (!response.ok) {
    // 自定义错误对象，添加状态码属性
    const error = new Error(`请求失败：${response.status}`);
    error.statusCode = response.status;
    
    // 可选：如果需要后端返回的错误详情，先解析响应体
    error.responseData = yield call([response, 'json']);
    
    throw error;
  }
  
  // 正常处理成功响应
  const data = yield call([response, 'json']);
  yield put({ type: 'FETCH_SUCCESS', payload: data });
} catch (error) {
  console.error('错误详情：', error);
  
  // 现在可以根据状态码执行专属逻辑
  if (error.statusCode === 401) {
    // 比如触发登出、跳转登录页、刷新token等操作
    yield put({ type: 'AUTH_REQUIRED' });
  } else {
    // 其他错误的通用处理
    yield put({ type: 'FETCH_FAILURE', payload: error.message });
  }
}

细节说明： #

• response.ok：这是fetch提供的便捷属性，当响应状态码在200-299区间时返回true，否则为false
• 自定义错误对象：通过给Error实例添加statusCode、responseData等属性，我们可以在catch中轻松获取到HTTP状态码和后端返回的错误信息
• 如果你的项目使用Axios等封装好的HTTP库，它们会自动将HTTP错误抛出，不需要手动判断，但原生fetch必须做这一步处理

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