Angular HttpHeaders 示例 - JavaScript

在Angular应用程序中进行HTTP请求时，可以指定一些header信息，这些header信息可以用于向服务器发送请求附加的信息。HttpHeaders是Angular中处理header信息的一个类。

创建HttpHeaders

可以使用HttpHeaders类的构造函数创建一个新的HttpHeaders对象，并指定一些header信息。例如：

import { HttpHeaders } from '@angular/common/http';

const headers = new HttpHeaders({
  'Content-Type': 'application/json',
  'Authorization': 'Bearer ' + token
});

上述代码中，创建了一个包含Content-Type和Authorization信息的HttpHeaders对象。

处理HttpResponse

在发送HTTP请求后，可以使用HttpResponse对象的headers属性获取到返回的response header信息。例如：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

this.http.get('/api/data', { observe: 'response' })
  .subscribe(response => {
    const contentType = response.headers.get('Content-Type');
    console.log('Content-Type:', contentType);
  });

上述代码中，使用HttpClient发起了一个HTTP GET请求，通过设置{ observe: 'response' }可以获取到response信息，然后在subscribe回调函数中，通过response.headers.get方法获取到了response header信息的Content-Type信息。

更改HttpHeader信息

可以使用HttpHeaders对象的set、append和delete方法来更改header信息。

set方法

使用set方法可以覆盖同名的header信息。例如：

const headers = new HttpHeaders({
  'Content-Type': 'application/json'
});

headers.set('Content-Type', 'application/xml');

上述代码中，先创建了一个包含Content-Type信息的HttpHeaders对象，然后使用set方法将Content-Type的值更改为application/xml。

append方法

使用append方法可以在已有header信息后面添加新的值，多个值之间使用英文逗号隔开。例如：

const headers = new HttpHeaders({
  'Accept-Encoding': 'gzip'
});

headers.append('Accept-Encoding', 'deflate');

上述代码中，先创建了一个包含Accept-Encoding信息的HttpHeaders对象，然后使用append方法在已有信息后面添加了deflate。

delete方法

使用delete方法可以删除指定的header信息。例如：

const headers = new HttpHeaders({
  'Cache-Control': 'no-cache',
  'Authorization': 'Bearer ' + token
});

headers.delete('Authorization');

上述代码中，先创建了一个包含Cache-Control和Authorization信息的HttpHeaders对象，然后使用delete方法删除了Authorization信息。

将HttpHeaders添加到HTTP Request中

使用HttpClient发送HTTP请求时，可以将自定义的HttpHeaders对象添加到请求中。例如：

import { HttpHeaders } from '@angular/common/http';

const headers = new HttpHeaders({
  'Content-Type': 'application/json',
  'Authorization': 'Bearer ' + token
});

this.http.post('/api/data', body, { headers: headers })
  .subscribe(response => {
    console.log(response);
  });

上述代码中，使用HttpClient发送了一个POST请求，将自定义的HttpHeaders对象通过{ headers: headers }的方式添加到了请求中。