如何在JavaScript中获取失败fetch请求的响应头（React场景）

Fetch API的特性是：只有当请求发生网络故障（比如断网、域名解析失败）时才会抛出异常进入try-catch，像400、500这类HTTP错误状态码并不会触发catch逻辑。所以你之前无法获取失败响应的res对象，是因为没正确处理HTTP错误的情况。

要获取失败响应里的X-reason头，你需要先判断响应的ok属性（当状态码在200-299之间时ok为true），如果ok为false，直接从res.headers里提取目标字段即可。

修改后的代码示例：

useEffect(() => {
  async function fetchData() {
    try {
      const res = await fetch(
        "https://api-production.afghantell.com/apiv1/eligibilities",
      );
      
      // 处理HTTP错误（非2xx状态码）
      if (!res.ok) {
        const errorReason = res.headers.get('X-reason');
        console.log('请求错误原因:', errorReason);
        // 这里可以根据需要抛出错误或做其他处理
        throw new Error(errorReason || `请求失败，状态码：${res.status}`);
      }

      // 请求成功的逻辑
      console.log(res.status);
      console.log(res.headers);
    } catch (err) {
      // 处理网络错误或自定义抛出的错误
      console.error('请求异常:', err);
    }
  }
  fetchData();
}, []);

说明：

• 先通过res.ok判断请求是否成功，非成功状态下直接读取响应头的X-reason。
• try-catch用来捕获网络类异常，以及我们手动抛出的HTTP错误。
• 如果需要，还可以调用res.json()或res.text()获取响应体内容，前提是服务器返回了对应格式的响应。

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