HTTP状态码及其含义

HTTP状态码是服务器在响应客户端请求时返回的三位数字代码，用于表示服务器对请求的处理结果。根据第一位数字，HTTP状态码可以分为五大类。

HTTP状态码分类

1xx 信息性状态码 (Informational)

表示请求已接收，继续处理。

2xx 成功状态码 (Success)

表示请求已成功被服务器接收、理解、并接受。

3xx 重定向状态码 (Redirection)

表示需要后续操作才能完成请求。

4xx 客户端错误状态码 (Client Error)

表示客户端似乎发生了错误，妨碍了服务器的处理。

5xx 服务器错误状态码 (Server Error)

表示服务器在处理请求的过程中发生了错误。

常见HTTP状态码详解

200 OK

这是最常见的成功状态码，表示请求已成功处理，服务器返回了所请求的资源。

// 示例：成功获取数据
fetch('/api/data')
  .then(response => {
    if (response.status === 200) {
      return response.json();
    }
    throw new Error('请求失败');
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

301 Moved Permanently

表示请求的资源已永久移动到新的URL。搜索引擎会更新其索引，将旧URL替换为新URL。

302 Found

表示请求的资源临时移动到新的URL。搜索引擎不会更新其索引，继续使用原URL。

304 Not Modified

表示资源未被修改，可使用缓存的版本。这有助于减少网络流量和提高加载速度。

// 示例：利用缓存
fetch('/api/data', {
  headers: {
    'If-Modified-Since': 'Wed, 21 Oct 2022 07:28:00 GMT'
  }
})
.then(response => {
  if (response.status === 304) {
    console.log('使用缓存数据');
    // 从缓存中获取数据
  } else if (response.status === 200) {
    return response.json();
  }
});

400 Bad Request

表示客户端请求有语法错误，服务器无法理解。常见原因包括：

• 请求参数格式错误
• 缺少必要的请求头
• 请求体格式不正确

401 Unauthorized

表示请求未经授权，需要身份验证。通常需要用户提供登录凭据。

// 示例：处理401错误
fetch('/api/protected-data')
  .then(response => {
    if (response.status === 401) {
      // 跳转到登录页面
      window.location.href = '/login';
    }
    return response.json();
  });

403 Forbidden

表示服务器理解请求，但拒绝执行。即使经过身份验证，用户也没有权限访问所请求的资源。

404 Not Found

表示服务器无法根据客户端的请求找到资源。这是最常见的错误之一，可能原因包括：

• URL输入错误
• 资源已被删除
• 权限不足

500 Internal Server Error

表示服务器内部错误，无法完成请求。这通常是服务器端的问题，与客户端无关。

HTTP状态码处理最佳实践

前端处理策略

1. 2xx 状态码：正常处理响应数据
2. 3xx 状态码：根据重定向规则处理
3. 4xx 状态码：显示相应的错误信息，指导用户操作
4. 5xx 状态码：显示服务器错误信息，并提供重试选项

// 示例：综合处理HTTP状态码
fetch('/api/data')
  .then(response => {
    switch (response.status) {
      case 200:
      case 201:
        return response.json();
      case 304:
        // 使用缓存数据
        return getCachedData();
      case 401:
        // 跳转到登录页面
        redirectToLogin();
        throw new Error('未授权，请登录');
      case 403:
        throw new Error('无权限访问');
      case 404:
        throw new Error('资源不存在');
      case 500:
        throw new Error('服务器内部错误');
      default:
        throw new Error(`未知错误: ${response.status}`);
    }
  })
  .then(data => {
    // 处理数据
    renderData(data);
  })
  .catch(error => {
    // 显示错误信息
    showError(error.message);
  });

错误页面设计

对于常见的HTTP错误状态码，设计友好的错误页面可以提升用户体验：

• 400 Bad Request：提示用户检查输入
• 401 Unauthorized：提供登录选项
• 403 Forbidden：解释权限限制
• 404 Not Found：提供搜索框或返回首页的链接
• 5xx 服务器错误：显示维护信息或提供重试按钮