如何向用户展示ERR_NAME_NOT_RESOLVED错误？JS捕获问题求助

嘿，这个问题我之前开发自定义服务器地址的应用时也踩过坑！其实这类ERR_NAME_NOT_RESOLVED属于底层网络层面的异常，浏览器出于安全限制不会直接暴露具体错误码，但我们可以通过特定的方式捕获这类异常并给用户友好提示，分两种常用请求方式给你说明：

1. 使用Fetch API的情况 #

Fetch默认会在网络请求完全无法完成（比如DNS解析失败、断网）时触发reject，你可以通过async/await的try/catch或者链式.catch()来捕获，不过要注意这类错误会被包装成TypeError：

async function fetchFromCustomServer(serverUrl) {
  try {
    const response = await fetch(`${serverUrl}/your-api-endpoint`);
    
    // 先处理HTTP状态码错误（比如404、500）
    if (!response.ok) {
      throw new Error(`请求失败：HTTP状态码 ${response.status}`);
    }
    
    const data = await response.json();
    // 处理正常返回的数据
    return data;
  } catch (error) {
    // 判断是否是网络层面的错误（包括DNS解析失败）
    if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
      alert(`无法连接到指定服务器：${serverUrl}\n请检查地址是否正确或网络是否正常！`);
    } else {
      // 处理其他类型的错误
      console.error('请求出错:', error);
    }
  }
}

2. 使用XMLHttpRequest的情况 #

XHR有专门的onerror事件，当发生DNS解析失败、断网这类底层网络错误时会直接触发，非常好处理：

function requestFromCustomServer(serverUrl) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `${serverUrl}/your-api-endpoint`);
  
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 处理正常响应数据
      const data = JSON.parse(xhr.responseText);
    } else {
      // 处理HTTP状态码错误
      alert(`请求失败：HTTP状态码 ${xhr.status}`);
    }
  };
  
  // 这里捕获DNS解析失败等底层网络错误
  xhr.onerror = function() {
    alert(`无法连接到指定服务器：${serverUrl}\n请检查地址是否正确或网络是否正常！`);
  };
  
  xhr.send();
}

额外优化：前置校验用户输入的地址 #

在发起请求前先校验用户输入的服务器地址格式是否合法，可以减少这类错误的发生：

function isValidServerUrl(url) {
  try {
    // 用URL构造函数校验格式
    new URL(url);
    return true;
  } catch (_) {
    return false;
  }
}

// 使用示例
const userInputServer = document.getElementById('server-input').value;
if (!isValidServerUrl(userInputServer)) {
  alert('请输入合法的服务器地址（例如：https://your-api-domain.com）');
  return;
}

// 校验通过后再发起请求
fetchFromCustomServer(userInputServer);

注意点 #

浏览器出于安全考虑，不会暴露ERR_NAME_NOT_RESOLVED这类具体的错误码，我们只能通过错误类型（比如TypeError）和错误消息的特征来判断是网络层面的异常，所以提示文案要通用一些，覆盖DNS解析失败、断网等情况。

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