javascript基础学习系列三百六十七：Headers对象

Headers 对象是所有外发请求和入站响应头部的容器。每个外发的 Request 实例都包含一个空的 Headers 实例，可以通过 Request.prototype.headers 访问，每个入站 Response 实例也可以通过 Response.prototype.headers 访问包含着响应头部的 Headers 对象。这两个属性都是可修改属性。 另外，使用 new Headers()也可以创建一个新实例。

1. Headers 与 Map 的相似之处

Headers 对象与 Map 对象极为相似。这是合理的，因为 HTTP 头部本质上是序列化后的键/值对，
它们的 JavaScript 表示则是中间接口。Headers 与 Map 类型都有 get()、set()、has()和 delete() 等实例方法，如下面的代码所示:

   let h = new Headers();
    let m = new Map();
// 设置键 h.set('foo', 'bar'); m.set('foo', 'bar');
// 检查键
console.log(h.has('foo')); // true console.log(m.has('foo')); // true console.log(h.has('qux')); // false console.log(m.has('qux')); // false
// 获取值 console.log(h.get('foo')); // bar console.log(m.get('foo')); // bar
// 更新值 h.set('foo', 'baz'); m.set('foo', 'baz');
 
let h = new Headers(seed);
let m = new Map(seed);
console.log(...h.keys());
console.log(...m.keys());
// foo, baz
// foo, baz
console.log(...h.values());  // bar, qux
console.log(...m.values());  // bar, qux
console.log(...h.entries()); // ['foo', 'bar'], ['baz', 'qux'] console.log(...m.entries()); // ['foo', 'bar'], ['baz', 'qux']

2. Headers 独有的特性

Headers 并不是与 Map 处处都一样。在初始化 Headers 对象时，也可以使用键/值对形式的对象， 24
而 Map 则不可以:

let seed = {foo: 'bar'};
// TypeError: object is not iterable 26

一个 HTTP 头部字段可以有多个值，而 Headers 对象通过 append()方法支持添加多个值。在 Headers 实例中还不存在的头部上调用 append()方法相当于调用 set()。后续调用会以逗号为分隔符 拼接多个值:

let h = new Headers();
h.append('foo', 'bar'); console.log(h.get('foo')); // "bar"
let h = new Headers(seed);
console.log(h.get('foo')); // bar
 // 取得更新的值 console.log(h.get('foo')); // baz console.log(m.get('foo')); // baz
// 删除值 h.delete('foo'); m.delete('foo');
// 确定值已经删除 console.log(h.get('foo')); // undefined console.log(m.get('foo')); // undefined
Headers 和 Map 都可以使用一个可迭代对象来初始化，比如: let seed = [['foo', 'bar']];
let h = new Headers(seed);
let m = new Map(seed);
console.log(h.get('foo')); // bar
console.log(m.get('foo')); // bar
而且，它们也都有相同的 keys()、values()和 entries()迭代器接口: let seed = [['foo', 'bar'], ['baz', 'qux']];

  let m = new Map(seed);

h.append('foo', 'baz');
    console.log(h.get('foo')); // "bar, baz"

3. 头部护卫

某些情况下，并非所有 HTTP 头部都可以被客户端修改，而 Headers 对象使用护卫来防止不被允 许的修改。不同的护卫设置会改变 set()、append()和 delete()的行为。违反护卫限制会抛出 TypeError。
Headers 实例会因来源不同而展现不同的行为，它们的行为由护卫来控制。JavaScript 可以决定 Headers 实例的护卫设置。下表列出了不同的护卫设置和每种设置对应的行为。
护卫 适用情形 限制
none request
request-no-cors
response
immutable
在通过构造函数创建 Headers 实例时激活 在通过构造函数初始化Request对象，且mode
无
不允许修改禁止修改的头部(参见 MDN 文档中
值为非 no-cors 时激活
在通过构造函数初始化Request对象，且mode 不允许修改非简单头部(参见 MDN 文档中的
值为 no-cors 时激活
在通过构造函数初始化 Response 对象时激活
在通过 error()或 redirect()静态方法初始 化 Response 对象时激活
的 forbidden header name 词条) simple header 词条)
不允许修改禁止修改的响应头部(参见 MDN 文 档中的 forbidden response header name 词条)
不允许修改任何头部