React如何处理Node.js/Express返回的域名验证错误响应？

首先得提醒你：fetch API有点特殊——它不会自动把HTTP错误状态码（比如404、500）当成Promise的reject，只有当完全没收到服务器响应（比如网络断了）的时候才会触发catch。所以咱们得手动检查响应状态，再处理错误。

下面是修改后的完整代码，我给你加了错误处理的逻辑：

try {
  const response = await fetch('/new-cert', {
    headers: { 'Content-Type': 'application/json' },
    method: 'POST',
    body: JSON.stringify({ domainInput: domainInputValue })
  });

  // 第一步：检查响应是否成功（状态码200-299之间）
  if (!response.ok) {
    // 如果是404或者其他错误，先尝试解析后端返回的错误信息
    const errorData = await response.json().catch(() => null); // 万一后端没返回JSON，就设为null
    // 抛出一个包含状态码和错误信息的自定义错误
    throw new Error(errorData?.message || `请求失败，状态码：${response.status}`);
  }

  // 验证通过的情况，处理成功响应
  const successData = await response.json();
  console.log('域名验证成功', successData);
  // 这里可以加成功后的UI逻辑，比如显示成功提示
} catch (error) {
  // 处理所有错误：网络错误、HTTP错误（比如404）
  console.error('请求出错:', error.message);
  // 显示错误信息给用户，比如更新state让UI展示错误提示
  // 比如：setErrorMsg(error.message);
}

关键细节说明： #

• response.ok 检查：这个属性会在状态码处于200-299范围时返回true，其他情况（比如404）返回false，这是判断HTTP请求是否成功的关键。
• 解析后端错误信息：如果你的后端在返回404时会附带自定义错误消息（比如{ "message": "域名格式无效" }），可以通过response.json()解析出来，让错误提示更友好。
• try/catch 包裹：把整个请求逻辑放在try块里，不管是网络错误还是我们手动抛出的HTTP错误，都会进入catch块统一处理，方便你更新前端UI展示错误。

针对你的场景（域名无效返回404）的特殊处理： #

如果你只想针对404做单独处理，可以在!response.ok里加个判断：

if (!response.ok) {
  if (response.status === 404) {
    // 专门处理域名无效的情况
    throw new Error('域名格式无效，请检查后重试');
  } else {
    // 处理其他HTTP错误
    throw new Error(`服务器出错，状态码：${response.status}`);
  }
}

这样就能精准捕获域名无效的错误，给用户显示对应的提示了。

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