为何500错误触发运行时异常未被Promise捕获？如何获取Response实例？

首先明确fetch的核心行为：只有网络层面的错误（比如断网、请求无法抵达服务器、跨域未配置导致浏览器拦截）才会触发Promise的reject。像500这类HTTP错误状态码，fetch会正常resolve并返回包含status字段的Response实例。

你遇到TypeError: Failed to fetch，说明不是单纯的服务器500响应——大概率是跨域请求时，服务器返回500的同时没有携带正确的CORS响应头，导致浏览器拦截了响应，直接抛出网络错误，你自然拿不到Response对象。

解决步骤 #

1. 先解决跨域问题（如果是跨域请求） #

确保服务器在返回500错误时，依然携带CORS相关响应头（比如Access-Control-Allow-Origin），这样浏览器才会把完整的响应交给fetch处理，你就能拿到带status的Response。

2. 修正fetch的错误处理逻辑 #

不管HTTP状态码成功与否，先在第一个then回调中获取Response，再通过res.ok（对应状态码200-299）判断是否为成功响应，再做后续处理：

链式调用写法

window.fetch(url, {
  method: 'POST',
  body,
})
.then((res) => {
  // 所有能到达服务器的请求，都会进入这个回调（包括500）
  console.log('响应状态码:', res.status);
  if (!res.ok) {
    // 非2xx状态码，可抛出错误交给后续catch处理
    throw new Error(`请求失败: ${res.status}`);
  }
  return res.json(); // 根据实际需求用res.text()/res.formData()等
})
.then((data) => {
  // 处理成功响应的数据
  console.log('成功数据:', data);
})
.catch((err) => {
  // 这里处理两种错误：网络错误（TypeError）、主动抛出的HTTP错误
  if (err instanceof TypeError) {
    console.log('网络层面错误:', err.message);
  } else {
    console.log('HTTP错误:', err.message);
  }
});

Async/Await写法（更直观）

async function sendRequest() {
  try {
    const res = await window.fetch(url, {
      method: 'POST',
      body,
    });
    console.log('响应状态码:', res.status);
    if (!res.ok) {
      throw new Error(`请求失败: ${res.status}`);
    }
    const data = await res.json();
    console.log('成功数据:', data);
  } catch (err) {
    if (err instanceof TypeError) {
      console.log('网络层面错误:', err.message);
    } else {
      console.log('HTTP错误:', err.message);
    }
  }
}

// 调用函数
sendRequest();

为什么原代码的try/catch没用？ #

原代码的try/catch包裹的是fetch函数本身的调用（同步操作），只能捕获fetch调用时的同步错误（比如url未定义），无法捕获Promise异步执行时的错误。异步Promise的错误需要用.catch()方法，或者在async/await语法中配合try/catch处理。

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