Fetch API - 状态码

Fetch API 提供了一个特殊的属性，用于查找请求的状态，该属性的名称为 status 属性。它是 Response 接口的一个只读属性，返回服务器针对给定请求发送的响应的 HTTP 状态代码。例如，404 - 资源未找到，200 - 成功，400 - 错误请求等。所有现代 Web 浏览器都支持它。

语法

response.status

status 属性返回的值是一个无符号短整型数字，表示当前请求的状态。

状态码

HTTP 状态返回的状态码如下所示：

成功

成功状态码是在请求成功完成时服务器返回的状态码。一些常用的成功状态码及其含义如下：

状态	消息	描述
200	OK	如果请求正常。
201	已创建	当请求完成并创建了一个新资源时。
202	已接受	当服务器接受请求时。
204	无内容	当响应正文中没有数据时。
205	重置内容	对于其他输入，浏览器会清除用于事务的表单。
206	部分内容	当服务器返回指定大小的部分数据时。

重定向

重定向状态码是表示重定向响应状态的状态码。一些常用的重定向状态码及其描述如下：

状态	消息	描述
300	多种选择	用于表示链接列表。以便用户可以选择任何一个链接并转到该位置。它仅允许五个位置。
301	永久移动	当请求的页面已移动到新的 URL 时。
302	已找到	当在不同的 URL 中找到请求的页面时。
304	未修改	URL 未修改。

客户端错误

客户端错误状态码表示在请求期间客户端发生的错误。或者我们可以说它们通知客户端由于错误导致请求不成功。一些常用的客户端错误状态码及其描述如下：

状态	消息	描述
400	错误请求	服务器无法满足请求，因为请求格式错误或语法无效。
401	未授权	请求需要身份验证，用户未提供有效的凭据。
403	禁止	服务器理解了请求，但没有满足它。
404	未找到	请求的页面未找到。
405	方法不允许	发出请求的方法不受页面支持。
406	不可接受	服务器生成的响应无法被客户端接受。
408	请求超时	服务器超时
409	冲突	由于请求冲突导致请求无法满足。
410	已消失	请求的页面不可用。
417	异常失败	服务器与 Expect 请求头字段的要求不匹配。

服务器错误

服务器错误状态码表示在请求期间服务器端发生的错误。或者我们可以说它们通知客户端由于服务器错误导致请求不成功。一些常用的服务器错误状态码及其描述如下：

状态	消息	描述
500	内部服务器错误	当服务器在处理请求时遇到错误时。
501	未实现	当服务器无法识别请求方法或缺乏满足请求的能力时。
502	错误网关	当服务器充当网关并从另一台服务器（上游）接收无效响应时。
503	服务不可用	当服务器不可用或宕机时。
504	网关超时	当服务器充当网关并且没有及时从另一台服务器（上游）接收到响应时。
505	HTTP 版本不受支持	当服务器不支持 HTTP 协议的版本时。
511	需要网络身份验证	当客户端需要进行身份验证才能访问网络时。

示例 1：使用 fetch() 函数查找状态码

在以下程序中，我们查找当前请求的状态码。为此，我们从给定的 URL 获取数据。如果服务器返回的响应为 OK，则显示状态码。否则，显示请求失败状态。如果出现错误，则此代码使用 catch() 函数处理错误。

<!DOCTYPE html>
<html>
<body>
<script>
   fetch("https://jsonplaceholder.typicode.com/todos")
   .then(response=>{
      if (response.ok){

      const mystatus = response.status;

      // Display output in HTML page
      document.getElementById("sendData").innerHTML = JSON.stringify(mystatus);
      }else{
         console.log("Request Fail:", mystatus);
      }
   })
   // Handling error
   .catch(err =>{
      console.log("Error is:", err)
   });
</script>
<h2>Status code of request</h2>
<div>
   <p>Status of the current request is </p>
   <!-- Displaying data-->
   <p id = "sendData"></p>
</div>
</body>
</html>

输出

示例 2：使用带有 async/await 的 fetch() 函数查找状态码

在以下程序中，我们查找当前请求的状态码。为此，我们创建一个异步函数。在此函数中，我们使用 fetch() 函数从给定的 URL 获取数据。如果服务器返回的响应为 OK，则在控制台日志中显示状态码。否则，显示请求失败状态。如果出现错误，则此代码使用 catch() 函数处理该错误。

<!DOCTYPE html>
<html>
<head>
<title>Fetch API Example</title>
</head>
<body>
<h1>Example of Fetch API</h1>
<script>
   async function getStatus() {
      try {
         const myResponse = await fetch("https://jsonplaceholder.typicode.com/todos");
   
         // Finding the status of the request
         console.log("Status of the request:", myResponse.status);
         console.log(myResponse);
      } catch (err) {
         console.log("Error is:", err);
      }
   }
   getStatus();
</script>
</body>
</html>

输出

结论

这就是我们如何查找服务器返回的当前请求的状态码。使用这些状态码，我们可以执行各种操作，例如检查请求是否成功，处理指定的错误或对服务器返回的响应执行适当的操作。现在在下一篇文章中，我们将了解 Fetch API 如何处理错误。

打印页面