前端捕获异常抛出状态码的处理-CFANZ编程社区

在开发前端应用时，异常捕获与错误处理是非常重要的一部分。尤其是在与后端进行交互时，我们经常会遇到服务端抛出不同状态码的情况，比如 400、404、500 等。前端如何处理这些错误，使得用户体验更加友好，并避免信息泄露，是我们需要关注的问题。

本文将介绍如何在前端捕获异常并根据不同的状态码进行适当的处理。

1. 什么是异常抛出状态码？

HTTP 状态码是 Web 应用与客户端（如浏览器）之间通信的基础，它反映了请求的处理结果。常见的 HTTP 状态码有：

2xx: 请求成功，例如 200 OK。
4xx: 客户端错误，例如 400 Bad Request。
5xx: 服务器错误，例如 500 Internal Server Error。

当后端服务器发生错误时，它通常会返回这些状态码来告知前端发生了什么问题。前端需要根据这些状态码采取不同的错误处理策略。

2. 使用 `try...catch` 捕获异常

在前端开发中，我们通常会使用 try...catch 来捕获代码执行时可能抛出的异常。我们可以在 catch 中处理异常，并根据后端返回的 HTTP 状态码来判断如何反馈给用户。

例子：

try {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    // 抛出异常时带上状态码
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  const data = await response.json();
  console.log(data);
} catch (error) {
  console.error('请求失败:', error);
  handleError(error);
}

在这个例子中，fetch 请求可能会返回失败的状态码。response.ok 用来检查响应是否成功，如果失败则抛出一个错误，并带上状态码。

3. 根据不同的状态码处理错误

错误处理需要根据不同的 HTTP 状态码进行相应的处理，避免给用户不必要的困扰。比如，如果是 404 错误，可能是请求的资源不存在；如果是 500 错误，则可能是服务器端的问题。

例子：处理不同状态码

function handleError(error) {
  const statusCode = parseInt(error.message.split(': ')[1]);
  
  switch (statusCode) {
    case 400:
      alert('请求无效，请检查请求参数');
      break;
    case 404:
      alert('请求的资源未找到');
      break;
    case 500:
      alert('服务器发生了问题，请稍后再试');
      break;
    default:
      alert('发生未知错误，请稍后再试');
  }
}

在这个例子中，我们首先提取状态码，并根据不同的状态码进行处理。如果是 400，提示用户请求无效；如果是 404，提示资源未找到；如果是 500，提示服务器故障。

4. 使用全局错误处理机制

在前端开发中，我们还可以使用全局错误处理机制来捕获未被 try...catch 捕获的异常。常用的全局错误捕获有以下两种：

window.onerror: 捕获 JavaScript 运行时错误。
window.addEventListener('unhandledrejection'): 捕获 Promise 异常。

例子：全局错误捕获

// 捕获 JavaScript 运行时错误
window.onerror = function(message, source, lineno, colno, error) {
  console.error(`捕获到全局错误：${message}，发生在 ${source}:${lineno}:${colno}`);
  alert('发生了一个未知错误，请稍后再试');
  return true; // 阻止默认的浏览器错误提示
};

// 捕获未处理的 Promise 异常
window.addEventListener('unhandledrejection', function(event) {
  console.error('未处理的 Promise 异常：', event.promise, event.reason);
  alert('发生了一个未知错误，请稍后再试');
});

在这个例子中，window.onerror 用来捕获全局的 JavaScript 错误，而 unhandledrejection 事件用于捕获 Promise 的异常。

5. 如何提高用户体验

异常处理不仅仅是捕获错误，还要提高用户体验。下面是一些常见的做法：

友好的提示：根据不同的错误类型给出易懂的错误信息，避免给用户技术细节。
重试机制：对于一些偶发性的网络错误（如 500 错误），可以考虑提供重试功能。
加载动画：在请求等待过程中，使用加载动画告知用户正在处理请求。

例子：加载动画与重试

async function fetchData() {
  const loader = document.getElementById('loader');
  loader.style.display = 'block'; // 显示加载动画

  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求失败:', error);
    handleError(error);
    const retry = confirm('请求失败，是否重试？');
    if (retry) {
      fetchData(); // 重试请求
    }
  } finally {
    loader.style.display = 'none'; // 隐藏加载动画
  }
}

在这个例子中，我们在请求发起时显示加载动画，在请求失败时提供重试功能。