教你用JS獲取Headers頭部信息

更新時間：2023年09月06日 09:32:43 作者：一顆不甘墜落的流星

這篇文章主要給大家介紹了關(guān)于用JS獲取Headers頭部信息的相關(guān)資料,頭部信息是在JavaScript中進行網(wǎng)絡(luò)請求時常用的操作,Headers 頭部信息包含了請求或響應(yīng)的元數(shù)據(jù),需要的朋友可以參考下

一、應(yīng)用場景

當我們請求一個接口的時候，會發(fā)現(xiàn) res 里面包含一個 headers 響應(yīng)頭信息：

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
   // 不區(qū)分大小寫
   console.log('res =', res.headers.get('conTEnt-length'));	// 1590
 });

二、實例方法

創(chuàng)建一個空的 Headers 對象是簡單的：

var myHeaders = new Headers();

2.1、追加：append()

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

語法：

`參數(shù)：
	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、獲?。篻et()

get() 方法：以 ByteString 形式從 Headers 對象中返回指定 header 的全部值。如果 Header 對象中不存在請求的 header，則返回 null。語法：

`參數(shù)：
	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() 方法：在可以在已經(jīng)聲明中的 headers 對象修改已有的一組鍵值對或者創(chuàng)建一個新的鍵值對。

語法：

`參數(shù)：
	name: 需要對 HTTP header 設(shè)置新值的 key，一般為字符串。
		  如果設(shè)置的name 不是 HTTP header 規(guī)范里面規(guī)定的 name，那么將會拋出錯誤"TypeError"。
	value: value 就是 name 對應(yīng)的值.
`
myHeaders.set(name);

示例：

var myHeaders = new Headers(); 
myHeaders.append('Content-Type', 'image/jpeg');
myHeaders.set('Content-Type', 'text/html');		// 'text/html'
// 如果這個鍵值對不存在，那么 set() 方法首先創(chuàng)建一個鍵值對，然后給它賦值。
myHeaders.set('Accept-Encoding', 'deflate');
// 如果這個鍵值對存在，那么 set() 方法將會覆蓋之前的 value 值：
myHeaders.set('Accept-Encoding', 'gzip');
myHeaders.get('Accept-Encoding'); // 'gzip'

如果你需要增加一個鍵值對，而不是要覆蓋之前的鍵值對，那么你需要用append()方法

2.4、判斷：has()

has() 方法：返回一個布爾值來聲明一個 Headers對象是否包含特定的頭信息。

語法：

`參數(shù)：
	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.

語法：

`參數(shù)：
	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方法去遍歷

// 創(chuàng)建一個 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);
   /*
   		打印結(jié)果：
   		'Content-Type'
   		'Vary'
   */
}
// 顯示 Headers 中所有的 value
for(var value of myHeaders.values()) {
   console.log(value);
   /*
   		打印結(jié)果：
   		'text/xml'
   		'Accept-Language'
   */
}
// 顯示 Headers 中所有的 [key, value] 鍵值對
for(var entrie of myHeaders.entries()) {
   console.log(entrie);
   /*
   		打印結(jié)果：
   		['Content-Type', 'text/xml']
   		['Vary', 'Accept-Language']
   */
}