夜猫子的知识栈 夜猫子的知识栈
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

夜猫子

前端练习生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • canvas
  • clipboard
  • fetch
  • fontface
  • formdata
  • geolocation
  • headers
    • 简介
    • 构造函数
    • 实例方法
      • append()
      • delete()
      • entries()
      • forEach()
      • get()
      • getSetCookie()
      • has()
      • keys()
      • set()
      • values()
  • intersectionObserver
  • intl-relativetimeformat
  • intl-segmenter
  • offline
  • page-lifecycle
  • page-visibility
  • pointer-lock
  • postmessage
  • request
  • response
  • server-sent-events
  • service-worker
  • svg
  • url
  • urlpattern
  • urlsearchparams
  • web-share-api
  • webaudio
  • webcomponents
  • websocket
  • 《Web Api》笔记
夜猫子
2024-09-06
目录

headers

# Headers 对象

# 简介

Headers 代表 HTTP 消息的数据头。

它通过Headers()构造方法,生成实例对象。Request.headers属性和Response.headers属性,指向的都是 Headers 实例对象。

Headers 实例对象内部,以键值对的形式保存 HTTP 消息头,可以用for...of循环进行便利,比如for (const p of myHeaders)。新建的 Headers 实例对象,内部是空的,需要用append()方法添加键值对。

# 构造函数

Headers()构造函数用来新建 Headers 实例对象。

const myHeaders = new Headers();
1

它可以接受一个表示 HTTP 数据头的对象,或者另一个 Headers 实例对象,作为参数。

const httpHeaders = {
  "Content-Type": "image/jpeg",
  "X-My-Custom-Header": "Zeke are cool",
};
const myHeaders = new Headers(httpHeaders);
1
2
3
4
5

最后,它还可以接受一个键值对数组,作为参数。

const headers = [
  ["Set-Cookie", "greeting=hello"],
  ["Set-Cookie", "name=world"],
];
const myHeaders = new Headers(headers);
1
2
3
4
5

# 实例方法

# append()

append()方法用来添加字段。如果字段已经存在,它会将新的值添加到原有值的末端。

它接受两个参数,第一个是字段名,第二个是字段值。它没有返回值。

append(name, value)
1

下面是用法示例。

const myHeaders = new Headers();
myHeaders.append("Content-Type", "image/jpeg");
1
2

下面是同名字段已经存在的情况。

myHeaders.append("Accept-Encoding", "deflate");
myHeaders.append("Accept-Encoding", "gzip");
myHeaders.get("Accept-Encoding"); // 'deflate, gzip'
1
2
3

上面示例中,Accept-Encoding字段已经存在,所以append()会将新的值添加到原有值的末尾。

# delete()

delete()用来删除一个键值对,参数name指定删除的字段名。

delete(name)
1

如果参数name不是合法的字段名,或者是不可删除的字段,上面的命令会抛错。

下面是用法示例。

const myHeaders = new Headers();
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.delete("Content-Type");
1
2
3

# entries()

entries()方法用来遍历所有键值对,返回一个 iterator 指针,供for...of循环使用。

const myHeaders = new Headers();
myHeaders.append("Content-Type", "text/xml");
myHeaders.append("Vary", "Accept-Language");

for (const pair of myHeaders.entries()) {
  console.log(`${pair[0]}: ${pair[1]}`);
}
1
2
3
4
5
6
7

# forEach()

forEach()方法用来遍历所有键值对,对每个指定键值对执行一个指定函数。

它的第一个参数是回调函数callbackFn,第二个参数thisArg是callbackFn所用的 this 对象。

forEach(callbackFn)
forEach(callbackFn, thisArg)
1
2

回调函数callback会接受到以下参数。

  • value:当前的字段值。
  • key:当前的字段名。
  • object:当前正在执行的 Headers 对象。

下面是用法示例。

const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Cookie", "This is a demo cookie");
myHeaders.append("compression", "gzip");

myHeaders.forEach((value, key) => {
  console.log(`${key} ==> ${value}`);
});
1
2
3
4
5
6
7
8

# get()

get()方法用于取出指定字段的字段值,它的参数就是字段名。如果字段名不合法(比如包含中文字符),它会抛错;如果字段在当前 Headers 对象不存在,它返回null。

get(name)
1

下面是用法示例。

myHeaders.append("Content-Type", "image/jpeg");
myHeaders.get("Content-Type"); // "image/jpeg"
1
2

如果当前字段有多个值,get()会返回所有值。

# getSetCookie()

getSetCookie()返回一个数组,包含所有Set-Cookie设定的 Cookie 值。

const headers = new Headers({
  "Set-Cookie": "name1=value1",
});

headers.append("Set-Cookie", "name2=value2");

headers.getSetCookie();
// ["name1=value1", "name2=value2"]
1
2
3
4
5
6
7
8

# has()

has()返回一个布尔值,表示 Headers 对象是否包含指定字段。

has(name)
1

如果参数name不是有效的 HTTP 数据头的字段名,该方法会报错。

下面是用法示例。

myHeaders.append("Content-Type", "image/jpeg");
myHeaders.has("Content-Type"); // true
myHeaders.has("Accept-Encoding"); // false
1
2
3

# keys()

keys()方法用来遍历 Headers 数据头的所有字段名。它返回的是一个 iterator 对象,供for...of使用。

const myHeaders = new Headers();
myHeaders.append("Content-Type", "text/xml");
myHeaders.append("Vary", "Accept-Language");

for (const key of myHeaders.keys()) {
  console.log(key);
}
1
2
3
4
5
6
7

# set()

set()方法用来为指定字段添加字段值。如果字段不存在,就添加该字段;如果字段已存在,就用新的值替换老的值,这是它与append()方法的主要区别。

它的第一个参数name是字段名,第二个参数value是字段值。

set(name, value)
1

下面是用法示例。

const myHeaders = new Headers();
myHeaders.set("Accept-Encoding", "deflate");
myHeaders.set("Accept-Encoding", "gzip");
myHeaders.get("Accept-Encoding"); // 'gzip'
1
2
3
4

上面示例中,连续两次使用set()对Accept-Encoding赋值,第二个值会覆盖第一个值。

# values()

values()方法用来遍历 Headers 对象的字段值。它返回一个 iterator 对象,供for...of使用。

const myHeaders = new Headers();
myHeaders.append("Content-Type", "text/xml");
myHeaders.append("Vary", "Accept-Language");

for (const value of myHeaders.values()) {
  console.log(value);
}
1
2
3
4
5
6
7
编辑 (opens new window)
上次更新: 2024/9/6 12:14:45
geolocation
intersectionObserver

← geolocation intersectionObserver→

最近更新
01
IoC 解决了什么痛点问题?
03-10
02
如何调试 Nest 项目
03-10
03
Provider注入对象
03-10
更多文章>
Copyright © 2019-2025 Study | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式