获取 API - Headers 接口
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>
输出
结论
这就是我们在 Fetch API 中使用 Header 接口的方式。 它提供了各种方法来操作、访问和迭代标头。 我们还可以使用 Request.headers 和 Response.headers 属性从请求和响应中检索 Header 对象。 现在在下一篇文章中，我们将了解Request接口。
