在进行前端开发时，我们经常需要向后端发送 Http 请求。而对于一些需要鉴权的接口，我们通常需要在 Http 请求头部(header)中添加鉴权信息。本文将介绍如何在 Angular 4.x 中设置 Http 请求头。
HttpClient
Angular 4.x 引入了新的 HttpClient 模块，替代了之前的 Http 模块。它提供了更加强大和便捷的 API。
在 Angular 应用中进行 Http 请求需要先导入 HttpClientModule，示例代码：
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule
]
})
export class AppModule { }在组件中注入 HttpClient，示例代码：
import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) { }设置请求头
在使用 HttpClient 发送请求之前，我们需要设置请求头信息。HttpClient 支持使用 HttpHeaders 来设置请求头。
示例代码：
import { HttpHeaders } from '@angular/common/http';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'my-auth-token'
})
};上述代码使用 HttpHeaders 创建了一个包含 'Content-Type' 和 'Authorization' 头部信息的 httpOptions 对象，可以在 HttpClient 请求方法中使用。
发送 GET 请求
示例代码：
-- -------------------- ---- -------
------ - ----------- ----------- - ---- -----------------------
------ - ---------- - ---- ------------------
----- ----------- - -
-------- --- -------------
--------------- -------------------
---------------- ---------------
--
--
-------------
------ ----- ----------- -
------- -------- - ------------
------------------- ----- ----------- - -
----------- ------------------ -
------ ------------------------------------ ------------
-
-上述代码创建了一个 UserService 类，其中的 getUsers 方法通过发送 GET 请求从后端获取用户列表。注意到 getUsers 方法中传递了 httpOptions，这样请求中就会包含设置的请求头。
发送 POST 请求
示例代码：
-- -------------------- ---- -------
------ - ----------- ----------- - ---- -----------------------
----- ----------- - -
-------- --- -------------
--------------- -------------------
---------------- ---------------
--
--
-------------
------ ----- ----------- -
------- -------- - ------------
------------------- ----- ----------- - -
------------- ------ ---------------- -
------ ----------------------------------- ----- ------------
-
-上述代码创建了一个 addUser 方法，用于向后端发送 POST 请求添加一个用户。注意到 addUser 方法中传递的参数中也包括了 httpOptions，这样请求中就会包含设置的请求头。
总结
本文介绍了如何在 Angular 4.x 中使用 HttpClient 设置 Http 请求头，并提供了 GET 和 POST 请求的示例代码。在实际的开发中，我们还需要注意请求的错误处理、路由守卫等方面。希望本文能给大家提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a03a748841e98946e6e46