Fetch API - 状态代码

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

语法

response.status

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

状态代码

HTTP状态返回的状态码如下−

成功

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

重定向

重定向状态代码是表示重定向响应状态的状态代码。 一些常用的重定向状态码及其说明如下 −

客户端错误

客户端错误状态代码表示请求期间客户端发生的错误。 或者我们可以说他们通知客户端由于错误，请求不成功。 一些常用的客户端错误状态码及其说明如下 −

服务器错误

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

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

在下面的程序中，我们找到当前请求的状态码。 为此，我们从给定的 URL 获取数据。 如果服务器返回的响应正常，则显示状态代码。 如果没有，则显示请求失败状态。 如果我们收到错误，则此代码将使用 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 获取数据。 如果服务器返回的响应正常，则在控制台日志中显示状态代码。 如果没有，则显示请求失败状态。 如果我们收到错误，则此代码将使用 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 如何处理错误。