在使用 Fetch API 进行网络请求时，Headers 对象用于存储和操作 HTTP 请求或响应头信息。Headers.set() 方法是一个非常实用的功能，允许你设置或更新特定头字段的值。
Headers.set() 方法简介
Headers.set() 方法用于将指定名称的头字段设置为指定的值。如果该头字段已经存在，则会覆盖原有值；如果不存在，则会添加新的头字段。
基本语法
headers.set(name, value);
name: 字符串类型，表示头字段的名称。value: 字符串类型，表示头字段的值。
使用场景
在实际应用中，我们常常需要根据不同的需求动态修改 HTTP 请求头。例如，在发起一个带有认证信息的请求时，我们需要设置 Authorization 头字段：
const headers = new Headers();
headers.set('Authorization', 'Bearer your-token-here');Headers.set() 方法的详细示例
下面我们将通过几个具体的例子来展示如何使用 Headers.set() 方法。
示例 1：设置基本的头字段
假设我们要向服务器发送一个自定义的 X-Custom-Header，可以这样操作：
const headers = new Headers();
headers.set('X-Custom-Header', 'CustomValue');
console.log(headers.get('X-Custom-Header')); // 输出: CustomValue示例 2：覆盖已存在的头字段
如果我们再次调用 set() 方法并传入相同的 name 参数，它将覆盖之前设置的值：
const headers = new Headers();
headers.set('Content-Type', 'text/plain');
headers.set('Content-Type', 'application/json');
console.log(headers.get('Content-Type')); // 输出: application/json示例 3：动态设置头字段
在某些情况下，你可能需要根据用户的输入或其他条件动态设置头字段。以下代码展示了如何实现这一点：
// javascriptcn.com 代码示例
const userToken = 'your-user-token';
const headers = new Headers();
// 动态设置 Authorization 头字段
if (userToken) {
headers.set('Authorization', `Bearer ${userToken}`);
}
// 发起请求
fetch('https://api.example.com/data', {
method: 'GET',
headers: headers
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));示例 4：处理复杂的头字段
有时候，你需要设置多个头字段或者头字段的值较为复杂。以下是一个更复杂的例子：
// javascriptcn.com 代码示例
const headers = new Headers();
// 添加多个头字段
headers.set('Accept-Language', 'en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7');
headers.set('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');
// 发送请求
fetch('https://api.example.com/data', {
method: 'POST',
headers: headers,
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));总结
通过上述示例可以看出，Headers.set() 方法提供了灵活的方式来管理和操作 HTTP 请求头。无论你是想添加新的头字段、覆盖旧的头字段还是动态地根据条件设置头字段，都可以轻松地使用这个方法来完成。
在接下来的章节中，我们将继续深入探讨 Fetch API 的其他功能，包括如何处理响应数据以及如何处理错误等。