正文

揭秘JS请求状态码：一文掌握HTTP响应背后的秘密

/0 浏览量
0324

HTTP状态码是HTTP协议的一部分，用于表示客户端请求与服务器之间的交互状态。在JavaScript中，当使用XMLHttpRequest或fetch API进行网络请求时，理解这些状态码对于调试和优化应用至关重要。本文将深入探讨JavaScript请求中的HTTP状态码，揭示它们背后的秘密。

什么是HTTP状态码？

HTTP状态码是服务器在响应HTTP请求时返回的数字代码。这些代码分为五类，每类代表不同的响应类型：

  • 1xx：信息性响应 - 表示请求已接收，需要进一步处理。
  • 2xx：成功响应 - 表示请求已成功处理。
  • 3xx：重定向响应 - 表示需要客户端采取进一步操作以完成请求。
  • 4xx：客户端错误响应 - 表示请求有误，服务器无法处理。
  • 5xx：服务器错误响应 - 表示服务器处理请求时发生错误。

JavaScript中的常用HTTP状态码

2xx 成功响应

  • 200 OK：请求成功，这是最常见的成功状态码。
  • 201 Created：请求成功，并创建了新的资源。
  • 202 Accepted：请求已接收，但尚未处理。

3xx 重定向响应

  • 301 Moved Permanently：请求的资源已永久移动到新位置。
  • 302 Found：请求的资源已临时移动到新位置。
  • 304 Not Modified：客户端缓存的请求资源未发生变化。

4xx 客户端错误响应

  • 400 Bad Request：请求有误，服务器无法理解。
  • 401 Unauthorized：请求未授权，需要认证。
  • 403 Forbidden：请求被服务器拒绝。
  • 404 Not Found：请求的资源不存在。

5xx 服务器错误响应

  • 500 Internal Server Error：服务器内部错误，无法完成请求。
  • 502 Bad Gateway：网关错误，服务器作为网关或代理，从上游服务器收到无效响应。
  • 503 Service Unavailable：服务器当前无法处理请求，通常是由于过载或维护。

JavaScript中的状态码处理

在JavaScript中，可以通过XMLHttpRequest或fetch API的事件监听器来处理状态码。

使用XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log('请求成功:', xhr.responseText);
    } else if (xhr.status >= 400 && xhr.status < 500) {
      console.log('客户端错误:', xhr.statusText);
    } else if (xhr.status >= 500) {
      console.log('服务器错误:', xhr.statusText);
    }
  }
};

xhr.send();

使用fetch API

fetch('https://example.com/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络请求错误');
    }
    return response.json();
  })
  .then(data => console.log('请求成功:', data))
  .catch(error => console.error('请求失败:', error));

总结

HTTP状态码是JavaScript网络请求中不可或缺的一部分。理解这些状态码可以帮助开发者更好地诊断和解决网络请求中的问题。通过本文的介绍，相信你已经对JavaScript请求状态码有了更深入的了解。

-- 展开阅读全文 --