脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS获取Headers头部信息

教你用JS获取Headers头部信息

 更新时间：2023年09月06日 09:32:43   作者：一颗不甘坠落的流星  
这篇文章主要给大家介绍了关于用JS获取Headers头部信息的相关资料,头部信息是在JavaScript中进行网络请求时常用的操作,Headers 头部信息包含了请求或响应的元数据,需要的朋友可以参考下

一、应用场景

当我们请求一个接口的时候，会发现 res 里面包含一个 headers 响应头信息：

fetch(url, {
   method: 'GET',
   headers: {
     'content-type': 'application/json',
     'X-Requested-With': 'XMLHttpRequest',
   },
   mode: 'cors',
   credentials: 'include',
 }).then(res => {
   console.log('res =', res);
 });

首先他里面肯定是有值的，只不过是一个Headers 对象，直接提供对象点语法是取不出来的

fetch(url, {
   method: 'GET',
   headers: {
     'content-type': 'application/json',
     'X-Requested-With': 'XMLHttpRequest',
   },
   mode: 'cors',
   credentials: 'include',
 }).then(res => {
   console.log('res =', res.headers.Date);	// undefined
   console.log('res =', res.headers.date);	// undefined
 });

这时候就要用到 Headers 对象 自带的方法了

fetch(url, {
   method: 'GET',
   headers: {
     'content-type': 'application/json',
     'X-Requested-With': 'XMLHttpRequest',
   },
   mode: 'cors',
   credentials: 'include',
 }).then(res => {
   console.log('res =', res.headers.get('Content-Length'));	// 1590
   console.log('res =', res.headers.get('content-length'));	// 1590
   // 不区分大小写
   console.log('res =', res.headers.get('conTEnt-length'));	// 1590
 });

二、实例方法

创建一个空的 Headers 对象是简单的：

var myHeaders = new Headers();

2.1、追加：append()

append() 方法：可以追加一个新值到已存在的 headers 上，或者新增一个原本不存在的 header。

语法：

`参数：
	name: 要追加给 Headers 对象的 HTTP header 名称。
	value: 要追加给 Headers 对象的 HTTP header 值。
`
myHeaders.append(name,value);

示例：

var myHeaders = new Headers(); 
myHeaders.append('Content-Type', 'image/jpeg');
myHeaders.get('Content-Type'); // Returns 'image/jpeg'
// 如果指定 header 不存在，append()将会添加这个 header 并赋值 .
myHeaders.append('Accept-Encoding', 'deflate');
// 如果指定 header 已存在并允许有多个值，append()将会把指定值添加到值队列的末尾。
myHeaders.append('Accept-Encoding', 'gzip');
myHeaders.getAll('Accept-Encoding'); // Returns [ "deflate", "gzip" ]

要使用新值覆盖旧值，请使用Headers.set。

2.2、获取：get()

get() 方法：以 ByteString 形式从 Headers 对象中返回指定 header 的全部值。如果 Header 对象中不存在请求的 header，则返回 null。语法：

`参数：
	name: 要获取 Headers 对象的 HTTP header 名称。
`
myHeaders.get(name);

示例：

var myHeaders = new Headers(); 
myHeaders.append('Content-Type', 'image/jpeg');
myHeaders.get('Content-Type'); // 'image/jpeg'
// 如果存在多个 header 值，那么只有第一个值会被返回：
myHeaders.append('Accept-Encoding', 'deflate');
myHeaders.append('Accept-Encoding', 'gzip');
myHeaders.get('Accept-Encoding'); // "deflate,gzip"

2.3、覆盖：set()

set() 方法：在可以在已经声明中的 headers 对象修改已有的一组键值对或者创建一个新的键值对。

语法：

`参数：
	name: 需要对 HTTP header 设置新值的 key，一般为字符串。
		  如果设置的name 不是 HTTP header 规范里面规定的 name，那么将会抛出错误"TypeError"。
	value: value 就是 name 对应的值.
`
myHeaders.set(name);

示例：

var myHeaders = new Headers(); 
myHeaders.append('Content-Type', 'image/jpeg');
myHeaders.set('Content-Type', 'text/html');		// 'text/html'
// 如果这个键值对不存在，那么 set() 方法首先创建一个键值对，然后给它赋值。
myHeaders.set('Accept-Encoding', 'deflate');
// 如果这个键值对存在，那么 set() 方法将会覆盖之前的 value 值：
myHeaders.set('Accept-Encoding', 'gzip');
myHeaders.get('Accept-Encoding'); // 'gzip'

如果你需要增加一个键值对，而不是要覆盖之前的键值对，那么你需要用append()方法

2.4、判断：has()

has() 方法：返回一个布尔值来声明一个 Headers对象 是否包含特定的头信息。

语法：

`参数：
	name: 你要测试的 HTTP 头字段的名称。
		  如果给出的名称不在 HTTP 头中，将爬出异常TypeError。
`
myHeaders.has(name);

示例：

var myHeaders = new Headers(); 
myHeaders.append('Content-Type', 'image/jpeg');
myHeaders.has('Content-Type'); // true
myHeaders.has('Accept-Encoding'); // false

2.5、判断：delete()

delete() 方法：可以从 Headers 对象中删除指定 header.

语法：

`参数：
	name: 需删除的 HTTP header 名称。
`
myHeaders.delete(name);

示例：

var myHeaders = new Headers(); 
// 先添加
myHeaders.append('Content-Type', 'image/jpeg');
myHeaders.get('Content-Type'); // 'image/jpeg'
// 后删除
myHeaders.delete('Content-Type');
myHeaders.get('Content-Type'); // null（因为它已被删除）

2.6、遍历：key(),values(),entries()

返回的是一个 Headers Iterator {} 迭代器，不能使用普通的for、forEach、map方法去遍历

// 创建一个 Headers 对象
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'text/xml');
myHeaders.append('Vary', 'Accept-Language');
// 显示 Headers 中所有的 key
for(var key of myHeaders.keys()) {
   console.log(key);
   /*
   		打印结果：
   		'Content-Type'
   		'Vary'
   */
}
// 显示 Headers 中所有的 value
for(var value of myHeaders.values()) {
   console.log(value);
   /*
   		打印结果：
   		'text/xml'
   		'Accept-Language'
   */
}
// 显示 Headers 中所有的 [key, value] 键值对
for(var entrie of myHeaders.entries()) {
   console.log(entrie);
   /*
   		打印结果：
   		['Content-Type', 'text/xml']
   		['Vary', 'Accept-Language']
   */
}

总结 

到此这篇关于JS获取Headers头部信息的文章就介绍到这了,更多相关JS获取Headers头部信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • javascript实现点击图片切换

    javascript实现点击图片切换

    这篇文章主要介绍了javascript实现点击图片切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • javascript 改变网页加载的CSS

    javascript 改变网页加载的CSS

    javascript 改变网页加载的CSS主要通过动态响应select触发的选项变化控制link标签加载的css,以实现不依赖cookie控制的页面css样式动态加载功能,需要的朋友可以参考一下
    2007-12-12
  • setInterval 和 setTimeout会产生内存溢出

    setInterval 和 setTimeout会产生内存溢出

    jscript 5.7 发布修复了不少ie javascript内存泄露的问题。但是leak依然存在。当我们频繁使用 setInterval 和 setTimeout 时就会每几秒钟出现32k leak...
    2008-02-02
  • 微信小程序创建自定义全局函数以及其调用方法详解

    微信小程序创建自定义全局函数以及其调用方法详解

    微信小程序有时需要函数里面调用函数,下面这篇文章主要给大家介绍了关于微信小程序创建自定义全局函数以及其调用方法的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • JavaScript实现水平进度条拖拽效果

    JavaScript实现水平进度条拖拽效果

    这篇文章主要为大家详细介绍了JavaScript实现水平进度条拖拽效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • js异步编程小技巧详解

    js异步编程小技巧详解

    这篇文章主要介绍了js异步编程技巧，使用计数器的方式，每完成一个请求计数器加1 当计数器等于2时执行回调逻辑,两个http并行发送,从而极大的提高了效率,需要的朋友可以参考下
    2017-08-08
  • JS实现网页每隔3秒弹出一次对话框的方法

    JS实现网页每隔3秒弹出一次对话框的方法

    这篇文章主要介绍了JS实现网页每隔3秒弹出一次对话框的方法,涉及JavaScript结合时间函数递归调用的相关技巧,非常简单,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 一个最简单的级联下拉菜单

    一个最简单的级联下拉菜单

    一个最简单的级联下拉菜单...
    2006-12-12
  • JavaScript游戏之优化篇

    JavaScript游戏之优化篇

    最近回头看看自己以前写的游戏代码，总结出几个可以优化改进的地方，当然还有很多地方需要优化，还希望大家指出来。
    2010-11-11
  • JS如何实现网站中PC端和手机端自动识别并跳转对应的代码

    JS如何实现网站中PC端和手机端自动识别并跳转对应的代码

    这篇文章主要介绍了JS如何实现网站中PC端和手机端自动识别并跳转对应的代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01

最新评论