Fetch API - 頭部資訊

Fetch API 提供了一個名為 Headers 的特殊介面，用於執行各種操作，例如設定、新增、檢索和刪除請求和響應頭部列表中的頭部。Headers 物件最初為空，或者可能包含零個或多個名稱-值對。可以使用 append() 方法在 headers 物件中新增頭部名稱。此介面提供各種方法來對 Headers 物件執行操作。

建構函式

要建立一個 headers 物件，我們可以使用 Headers() 建構函式以及 new 關鍵字。此建構函式可能包含引數，也可能不包含引數。

語法

const newHeader = New Headers()
Or
const newHeader = New Headers(init)

Headers() 建構函式只有一個可選引數 init。它是一個物件，包含您希望預填充 headers 物件的 HTTP 頭部。此引數的值是字串值或名稱-值對陣列。

示例 1

在下面的程式中，我們正在向伺服器傳送資料。為此，我們使用 Header() 建構函式建立一個新的 headers 物件，然後使用 append() 函式新增名稱-值對。之後，我們使用 fetch() 函式發出 fetch() 請求，其中包括 POST 方法、我們之前建立的 headers 物件（用於向請求新增頭部）以及請求的主體。現在，在向伺服器傳送請求後，我們使用 then() 函式處理響應。如果遇到錯誤，則 catch() 函式會處理該錯誤。

<!DOCTYPE html>
<html>
<body>
<script>
   // Creating Headers object
   const myheaders = new Headers();
   
   // Adding headers to the Headers object
   myheaders.append('Content-Type', 'application/json');
   myheaders.append('Authorization', 'Bearer token123');
   
   // Sending data using POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request
      method: "POST",
   
      // Adding headers
      headers:myheaders,
   
      // Adding body which we want to send
      body: JSON.stringify({
         id: 32,
         title: "Hello! How are you?",
      })
   })
   
   // Converting received information into JSON
   .then(response => response.json())
   .then(myData => {
      // Display the sent data
      console.log("Data Sent Successfully");
   
      // Display output
      document.getElementById("manager").innerHTML = JSON.stringify(myData);
   });
</script>
   <h2>Display Data</h2>
   <div>
      <!-- Displaying retrevie data-->
      <p id = "manager"></p>
   </div>
</body>
</html>

輸出

方法

以下是 Header 介面常用方法：

序號	方法名稱和描述
1	Headers.append() 此方法用於在現有 headers 物件中追加新值。或者，如果不存在，則可以新增頭部。
2	Headers.delete() 此方法用於從 Headers 物件中刪除頭部。
3	Headers.enteries() 此方法提供一個迭代器，允許我們迭代給定物件中存在的所有鍵/值對。
4	Headers.forEach() 此方法針對 Headers 物件中存在的每個鍵/值對執行一次。
5	Headers.get() 此方法用於查詢 Header 物件中存在的頭部所有值的字串序列。
6	Headers.getSetCookie() 此方法返回一個數組，其中包含與響應相關的 Set-Cookie 頭部所有值。
7	Headers.has() 此方法返回一個布林值，檢查當前 Headers 物件是否包含指定的頭部。
8	Headers.keys() 此方法用於迭代給定物件中存在的鍵值對的所有鍵。
9	Headers.set() 此方法用於為現有 Headers 物件設定新值。或者，如果不存在，則可以新增頭部。
10	Headers.values() 此方法用於迭代給定物件中存在的鍵值對的所有值。

示例 2

在下面的程式中，我們使用 Headers 介面提供的 append()、get()、keys() 和 values() 等方法。

<!DOCTYPE html>
<html>
<body>
<script>
   // Creating Headers object
   const myheaders = new Headers();
   
   // Adding headers to the Headers object
   myheaders.append('Content-Type', 'application/json');
   myheaders.append('Authorization', 'Bearer token123');
   
   // Sending data using POST request
   fetch("https://jsonplaceholder.typicode.com/todos", {
      // Adding POST request
      method: "POST",
   
      // Adding headers
      headers:myheaders,
   
      // Adding body which we want to send
      body: JSON.stringify({
         id: 32,
         title: "Hello! How are you?",
      })
   })
   // Converting received information into JSON
   .then(response => {
      // Header also returned in response 
      // Accessing response header
      const resHeader = response.headers;
   
      // Getting content type value of the response header
      // Using get() function
      const contentTypeValue = resHeader.get("Content-Type");
      console.log("Content-Type:", contentTypeValue);
   
      // Getting all the keys present in the
      //  key-value pairs in response header
      // Using keys() function
      const headerKeys = resHeader.keys();
      for(const res of headerKeys){
      console.log("Keys:", res);
      }
      // Getting all the values present in the
      //  key-value pairs in response header
      // Using Values() function
      const headerValues = resHeader.values();
         for(const resVal of headerValues){
         console.log("Values:", resVal);
      }
   });
</script>
   <h2>Fetch API Examples</h2>
</body>
</html>

輸出

結論

這就是我們在 Fetch API 中使用 Header 介面的方式。它提供各種方法來操作、訪問和迭代頭部。我們還可以使用 Request.headers 和 Response.headers 屬性從 Request 和 response 中檢索 Header 物件。在下一篇文章中，我們將學習 Request 介面。

列印頁面