❮ Fetch API 浏览器兼容性 Fetch API Request 请求 ❯

获取 API - Headers 接口

更新于 2024/4/26 5:48:00

Fetch API 提供了一个称为 Headers 接口的特殊接口，用于执行各种操作，例如从请求和响应的标头列表中设置、添加、检索和删除标头。 Headers 对象最初是空的，或者可能包含零个或多个名称-值对。您可以使用append() 方法在 headers 对象中添加标头名称。该接口提供了各种方法来对 Headers 对象执行操作。

构造函数

要创建 headers 对象，我们可以使用 Headers() 构造函数和 new 关键字。该构造函数可能包含也可能不包含参数。

语法

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

Headers() 构造函数仅包含一个可选参数，即 init。它是一个包含 HTTP 标头的对象，您希望将其预填充到标头对象中。该参数的值为字符串值或名称-值对数组。

示例 1

在下面的程序中，我们将数据发送到服务器。为此，我们使用 Header() 构造函数创建一个新的标头对象，然后使用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 接口的常用方法 −

Sr.No.	方法名称和描述
1	Headers.append() 此方法用于在现有标头对象中附加新值。或者，如果标题不存在，它可以添加标题。
2	Headers.delete() 此方法用于从 Headers 对象中删除标头。
3	Headers.entries() 此方法提供了一个迭代器，允许我们迭代给定对象中存在的所有键/值对。
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>