fetch 之 header

在了解header之前,我们要先了解.graud这个东西https://blog.csdn.net/jiaoqi6132/article/details/104167548

Fetch API 的 Headers 接口允许您对HTTP请求和响应头执行各种操作。 这些操作包括检索,设置,添加和删除。 一个Headers对象具有关联的头列表,它最初为空,由零个或多个键值对组成。你可以使用 append() 方法添加 之类的方法添加到此.用在绿色的方框里的.

 

1.Header的构造函数

var myHeaders = new Headers(init);

init 可选

通过一个包含任意 HTTP headers 的对象来预设你的 Headers. 可以是一个ByteString 对象; 或者是一个已存在的 Headers 对象. 

一个实现了Headers 的对象可以直接用于 for...of 结构中, 而不是 entries()for (var p of myHeaders) 等价于 for (var p of myHeaders.entries()).

 

2. 方法

(1).Headers.append()

myHeaders.append(name,value);

给现有的header添加一个值, 或者添加一个未存在的header并赋值.

name:要追加给Headers对象的HTTP header名称.

value:要追加给Headers对象的HTTP header值.

 

 

(2).Headers.get()

myHeaders.get(name);

name

从Headers对象中检索的HTTP header 名,如果HTTP header中不存在指定header名则会抛出一个TypeError.

以 ByteString 形式返回检索到的值.

 

(3).Headers.delete()

从Headers对象中删除指定header.

myHeaders.delete(name);

name:需删除的HTTP header名称.

 

(4)Headers.has()

以布尔值的形式从Headers对象中返回是否存在指定的header.

myHeaders.has(name);

name:你要测试的HTTP头字段的名称。如果给出的名称不在HTTP头中,将爬出异常TypeError

Returns: A Boolean.

 

(5).Headers.entries()

以 迭代器 的形式返回Headers对象中所有的键值对.

headers.entries();

Return value :返回一个 迭代器.

 

(6.)Headers.set()

myHeaders .set(name,value);

name:要设置为新值的HTTP标头的名称。如果给定名称不是HTTP标头的名称,则此方法将引发TypeError

value

您要设置的新值。

 

(7).Headers.forEach()

对每个数组元素执行一次提供的功能。还在开发,根据数组方法去迭代

 

(8).Headers.values()

<span style="color:#333333">headers.values();</span>

Headers.values()方法返回iterator允许遍历此对象中包含的所有值的方法。值是ByteString对象。

 

(9).Headers.keys()

headers.keys();

Headers.keys()方法返回iterator允许浏览此对象中包含的所有键的信息。键是ByteString对象。

 

3.注意点

(1).Headers.set() 和 Headers.append()的使用

值得注意的是,在header已存在或者有多个值的状态下Headers.set() 和 Headers.append()的使用有如下区别, Headers.set() 将会用新的值覆盖已存在的值, 但是Headers.append()会将新的值添加到已存在的值的队列末尾. 请参相关词条内的示例代码.

 

(2).触发错误

如果您尝试传入名称不是有效的HTTP头名称的引用,则所有Headers方法都将引发 TypeError 。 如果头部有一个不变的Guard,则变异操作将会抛出一个 TypeError 。 在其他任何失败的情况下,他们默默地失败。

A header consists of a name and value.

name is a byte sequence that matches the field-name token production.

value is a byte sequence that matches the following conditions:

每个标头字段均包含一个不区分大小写的字段名,后跟冒号(“:”),可选的前导空格,字段值和可选的尾随空格。

(3).重复表头的危害

重复遍历标头值时,它们将按字典顺序自动排序,并且来自重复标头名称的值将合并在一起。 

返回值

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

### 如何在 JavaScript Fetch API 中正确设置和使用 Header 请求参数 在 JavaScript 的 `fetch` API 中,可以通过传递一个配置对象作为第二个参数来设置请求头(Headers)。这个配置对象中的 `headers` 属性允许开发者定义自定义的 HTTP 头部信息。下面是一个完整的例子展示如何实现这一点: #### 设置 Headers 参数 为了向服务器发送带有特定头部信息的请求,可以利用 `Headers` 对象或者直接提供一个键值对的对象[^1]。 ```javascript fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer your-access-token' }, body: JSON.stringify({ key: 'value' }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ``` 上述代码片段展示了如何通过 `headers` 字段指定两个常见的头部项:`Content-Type` 和 `Authorization`。其中,`Content-Type` 表明了消息主体所采用的数据格式;而 `Authorization` 则通常用来携带身份验证令牌。 #### 创建并操作 Headers 实例 除了直接传入字面量形式的头部外,还可以先实例化一个 `Headers` 对象再对其进行增删改查等操作后再赋值给 `fetch` 方法调用时使用的选项对象。 ```javascript const myHeaders = new Headers(); myHeaders.append('Content-Type', 'application/json'); myHeaders.append('Authorization', 'Bearer your-access-token'); fetch('https://api.example.com/data', { method: 'POST', headers: myHeaders, body: JSON.stringify({ key: 'value' }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ``` 这里我们首先创建了一个新的 `Headers` 对象并通过 `.append()` 方法为其添加了必要的字段。 需要注意的是,虽然可以直接修改已有的 `Headers` 对象的内容,但是原生的 `Request`, `Response` 或者其他地方获取到的 `Headers` 都是不可变的副本,任何尝试改变这些副本的行为都不会影响实际发出的HTTP请求或接收到的回复。 另外,在某些情况下可能还需要考虑跨域资源共享(CORS)策略的影响。当目标资源所在的域名不同于发起请求的应用所在域名时,则需确保服务端支持相应的 CORS 设置以便客户端能够顺利接收到来自不同源的服务响应数据[^3]。 最后提醒一下,涉及到敏感资料传输的时候一定要启用 HTTPS 协议加密通信链路从而保障信息安全。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值