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 如何處理錯誤。

列印頁面