如何为JavaScript Fetch获取连接拒绝等场景的更具体错误信息？

无法直接从fetch抛出的TypeError中获取浏览器控制台里显示的具体错误原因（比如“Connection Refused”）。这是浏览器的安全限制：为了避免泄露服务器配置、网络拓扑等敏感信息，浏览器只会向前端JS返回模糊的Failed to fetch消息，而把具体错误细节仅保留在开发者控制台中，供开发人员调试使用。

替代解决方案 #

虽然拿不到具体错误原因，但可以通过一些间接方式优化用户提示：

• 判断离线状态：利用navigator.onLine API检测用户是否处于离线状态，针对性给出提示。
• 区分超时场景：给fetch配置超时逻辑，超时后单独提示“请求超时，请稍后重试”。
• 服务器端自定义错误：如果请求能到达服务器（比如返回4xx/5xx状态码），可以在后端返回结构化的错误信息，前端通过response.json()获取并展示。但这种方式不适用于连接拒绝、DNS解析失败等根本无法到达服务器的场景。

示例代码 #

async function fetchData(url) {
  try {
    // 配置超时逻辑
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);
    
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(timeoutId);

    if (!response.ok) {
      // 处理服务器返回的错误
      const errorInfo = await response.json().catch(() => ({ message: '服务器返回未知错误' }));
      alert(`请求失败：${errorInfo.message}`);
      return;
    }

    return await response.json();
  } catch (error) {
    if (error instanceof TypeError) {
      // 网络类错误处理
      if (!navigator.onLine) {
        alert('当前处于离线状态，请检查网络连接');
      } else {
        alert('网络连接失败，请检查网络设置或稍后重试');
      }
      // 控制台打印原始错误供调试
      console.error('网络错误详情：', error);
    } else if (error.name === 'AbortError') {
      alert('请求超时，请稍后重试');
    } else {
      alert(`发生未知错误：${error.message}`);
    }
  }
}

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