Angular：Http的RequestOptions在HttpClient中的等效用法

我来帮你搞定这个迁移问题！你之所以没成功添加请求头，核心原因是HttpClient的HttpHeaders是不可变对象——和旧Http模块里可变的Headers不同，调用set()方法不会修改原实例，而是返回一个全新的包含修改后头部的对象，你之前没对返回的新实例重新赋值，所以原header根本没变化。

下面给你几种正确的实现方式：

方式一：创建HttpHeaders时直接初始化（最简洁） #

直接在构造HttpHeaders时传入配置对象，一步到位：

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

const pass = 'Basic ' + btoa(cuid + ': ');
// 直接在构造器中设置Authorization头
const headers = new HttpHeaders({
  'Authorization': pass
});

// 直接将headers传入请求选项
return this.httpClient.post(myServiceUrl, {}, { headers });

方式二：链式调用set方法 #

如果需要逐步添加多个请求头，可以用链式调用（每次set都会返回新实例，链式调用自动传递新对象）：

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

const pass = 'Basic ' + btoa(cuid + ': ');
const headers = new HttpHeaders()
  .set('Authorization', pass)
  .set('Content-Type', 'application/json'); // 按需添加其他头

return this.httpClient.post(myServiceUrl, {}, { headers });

方式三：单独赋值新实例 #

如果要分步修改，记得每次调用set后都要把返回的新实例重新赋值给变量：

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

let headers = new HttpHeaders();
const pass = 'Basic ' + btoa(cuid + ': ');
// 必须重新赋值，因为set返回新的HttpHeaders实例
headers = headers.set('Authorization', pass);

return this.httpClient.post(myServiceUrl, {}, { headers });

另外补充一点：HttpClient的请求方法（post/get等）的第三个参数就是请求选项对象，不需要再像旧模块那样创建RequestOptions，直接传入{ headers: ... }就可以了。

内容的提问来源于stack exchange，提问作者firasKoubaa