Ajax 简明教程
Fetch API - Headers
Fetch API 提供了一个称为 Headers 界面的特殊接口来执行各种操作，例如设置、添加、检索及从请求和响应的 headers 列表中删除 headers。Headers 对象最初是空的，或可能包含零个或多个名称-值对。你可以使用 append() 方法在 headers 对象中添加 header 名称。此界面提供了各种方法对 Headers 对象执行操作。
Syntax
const newHeader = New Headers()
Or
const newHeader = New Headers(init)Headers() 构造函数仅包含一个可选参数 init。它是一个包含你要预填充你的 headers 对象的 HTTP headers 的对象。此参数的值为字符串值或名称-值对数组。
Example 1
在以下程序中，我们向服务器发送数据。因此，我们使用 Header() 构造函数创建一个新的 headers 对象，然后使用 append() 函数添加名称-值对。然后，我们使用包含 POST 方法、我们之前创建的 headers 对象（用于向请求添加 header）和请求正文的 fetch() 函数发起一个 fetch() 请求。现在，在向服务器发送请求后，我们使用 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>
Methods
以下是 Header 界面的常用方法 −
Sr.No. |
Method Name & Description |
1 |
Headers.append() 此方法用于在现有标题对象中附加一个新值。或者，如果标题不存在，则可以添加一个标题。 |
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() 此方法用于遍历给定对象中存在的所有键/值对的值。 |
Example 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>