Blog Details

  • Home  
  • javascript基础从小白到高手系列三千零四十八:Headers 独有的特性

javascript基础从小白到高手系列三千零四十八:Headers 独有的特性

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

而Map 则不可以:

let seed = {foo: ‘bar’};

let h = new Headers(seed);

console.log(h.get(‘foo’)); // bar

let m = new Map(seed);

// TypeError: object is not iterable

一个HTTP 头部字段可以有多个值,而Headers 对象通过append()方法支持添加多个值。在

Headers 实例中还不存在的头部上调用append()方法相当于调用set()。后续调用会以逗号为分隔符

拼接多个值:

let h = new Headers();

h.append(‘foo’, ‘bar’);

console.log(h.get(‘foo’)); // “bar”

h.append(‘foo’, ‘baz’);

console.log(h.get(‘foo’)); // “bar, baz”

3. 头部护卫

某些情况下,并非所有HTTP 头部都可以被客户端修改,而Headers 对象使用护卫来防止不被允

许的修改。不同的护卫设置会改变set()、append()和delete()的行为。违反护卫限制会抛出

TypeError。

Headers 实例会因来源不同而展现不同的行为,它们的行为由护卫来控制。JavaScript 可以决定

Headers 实例的护卫设置。下表列出了不同的护卫设置和每种设置对应的行为。

护 卫 适用情形 限 制

none 在通过构造函数创建Headers 实例时激活 无

request 在通过构造函数初始化Request 对象,且mode

值为非no-cors 时激活

不允许修改禁止修改的头部(参见MDN 文档中

的forbidden header name 词条)

request-no-cors 在通过构造函数初始化Request 对象,且mode

值为no-cors 时激活

不允许修改非简单头部(参见MDN 文档中的

simple header 词条)

response 在通过构造函数初始化Response 对象时激活不允许修改禁止修改的响应头部(参见MDN 文

档中的forbidden response header name 词条)

immutable 在通过error()或redirect()静态方法初始

化Response 对象时激活

Request 对象

顾名思义,Request 对象是获取资源请求的接口。这个接口暴露了请求的相关信息,也暴露了使

用请求体的不同方式。

创建Request 对象

可以通过构造函数初始化Request 对象。为此需要传入一个input 参数,一般是URL:

let r = new Request(‘https://foo.com’);

console.log®;

// Request {…}

Request 构造函数也接收第二个参数——一个init 对象。这个init 对象与前面介绍的fetch()

的init 对象一样。没有在init 对象中涉及的值则会使用默认值:

// 用所有默认值创建Request 对象

console.log(new Request(‘’));

// Request {

// bodyUsed: false

// cache: “default”

// credentials: “same-origin”

// destination: “”

// headers: Headers {}

// integrity: “”

// keepalive: false

// method: “GET”

// mode: “cors”

// redirect: “follow”

// referrer: “about:client”

// referrerPolicy: “”

// signal: AbortSignal {aborted: false, onabort: null}

// url: “”

// }

// 用指定的初始值创建Request 对象

console.log(new Request(‘https://foo.com’,

{ method: ‘POST’ }));

// Request {

// bodyUsed: false

// cache: “default”

// credentials: “same-origin”

// destination: “”

// headers: Headers {}

// integrity: “”

// keepalive: false

// method: “POST”

// mode: “cors”

// redirect: “follow”

// referrer: “about:client”

// referrerPolicy: “”

// signal: AbortSignal {aborted: false, onabort: null}

// url: “https://foo.com/”

// }