概述
在 Angular 应用中，HTTP 请求是非常常见的一种操作，用于向后端发送请求数据并获取响应数据。一般而言，我们会使用 Angular 内置的 HttpClient 模块来处理这些请求。
HttpClient 模块提供了很多强大的功能，包括支持请求和响应拦截器，可以方便地对请求和响应数据进行处理，使应用逻辑更为清晰和灵活。下面，我们将重点介绍 Angular 中对 HTTP 请求的处理方法。
发送 GET 请求
发送 GET 请求的方式非常简单，只需要调用 HttpClient 实例上的 get 方法即可：
import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) {}
this.http.get('/api/data').subscribe(data => {
console.log(data);
});上述代码中，我们使用 HttpClient 实例发送一个 GET 请求，请求地址为 /api/data。请求成功后，我们将响应数据输出到控制台。
发送 POST 请求
与发送 GET 请求类似，HttpClient 实例也提供了 post 方法用于发送 POST 请求：
this.http.post('/api/data', { data }).subscribe(response => {
console.log(response);
});上述代码中，我们发送了一个 POST 请求，请求地址为 /api/data，请求数据为 { data } 对象。
拦截器的使用
当我们发送 HTTP 请求时，通常需要对请求和响应数据进行处理。此时，我们可以使用拦截器来实现这些操作。
拦截器是一个类，可以实现 HttpInterceptor 接口，用于拦截 HTTP 请求和响应，并对其进行处理。拦截器必须实现 intercept 方法，该方法接受两个参数：请求或响应对象，和一个 next 参数。
下面是一个使用拦截器对请求头添加 token 的示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------- ---------------- ------------ ------------ ----------- - ---- -----------------------
------ - ----------- - ---- -----------------
-------------
------ ----- ---------------- ---------- --------------- -
------------------- ------------ ------------ --
------------------ ----------------- ----- ------------ -
----- ----- - ----------------------------
-- ------- -
----- ------- - --- ----------------------------- ------- ------------
------- - --------------- ------- ---
-
------ ---------------------
-
-上述代码中，我们定义了一个名为 TokenInterceptor 的拦截器。在 intercept 方法中，我们首先获取了当前用户的 token；如果存在 token，则使用 HttpHeaders 创建了一个包含 token 的请求头，并将其添加到请求对象中。
最后，我们调用 next.handle 方法，将请求对象传递给下一个拦截器或 HttpClient，继续处理请求。
使用以上示例，我们可以在每次 HTTP 请求时都自动为请求头添加 token，避免了在每个请求中手动添加 token 的重复工作。
总结
Angular 中对 HTTP 请求的处理方法非常丰富，我们可以使用 Angular 内置的 HttpClient 模块直接发送请求，并使用拦截器对请求和响应数据进行处理。使用拦截器可以使应用逻辑更为清晰和灵活，减少代码重复。在实际应用中，我们可以根据实际需求来决定是否使用拦截器，以提升应用效率和开发体验。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64705d7b968c7c53b0e7dce2