在开发 Web 应用程序时，我们经常需要向服务器发送 http 请求获取数据。Angular 框架提供了一个强大的 HttpClient 模块，使得向服务器发起 http 请求变得非常简单。但是，在处理从服务器返回的响应时，我们通常需要对响应进行一些操作，例如处理错误、添加标头、以及更改响应的格式等。本文将介绍在 Angular 中拦截 http 响应并进行处理的方式和最佳实践。
Http 拦截器
Angular 提供了一个 HttpInterceptor 接口，它提供了对从服务器返回的 http 响应进行拦截和处理的机制。拦截器是一个服务，通常在应用程序启动时注入到应用程序的根拦截器列表中。当我们向服务器发出请求时，在响应返回到我们的应用程序之前，拦截器将从列表中按照注册的顺序将其它拦截器输入的拦截器函数依次执行。这样，我们就可以在响应返回到应用程序之前对其进行修改或处理。
创建 Http 拦截器
要创建 Http 拦截器，我们需要实现 HttpInterceptor 接口。我们可以在应用程序的根模块中定义一个提供拦截器的服务，并将其注入到应用程序的 providers 数组中。下面是一个示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- ---------------- ------------ ----------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- ----------------- ---------- --------------- -
------------------ ----------------- ----- ------------- -------------------------- -
-- ------
------ ---------------------
-
-在上述代码中，我们实现了 HttpInterceptor 接口，并在 intercept() 方法中添加了我们的逻辑。该方法接受两个参数：传入的请求和一个 HttpHandler 对象，后者表示剩余的拦截器。在方法中，我们可以检查 request ，处理甚至终止它，并在需要时修改它。
注册 Http 拦截器
我们已经创建了一个 Http 拦截器，但是需要将其注册到应用程序中。我们需要在应用程序的 @NgModule 元数据中进行注册。在 providers 数组中添加我们的自定义拦截器如下：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------------ ---------------- - ---- ----------------------- ------ - ----------------- - ---- ----------------------- ----------- -------- --------------- ------------------ ------------- --------------- ---------- -- -------- ------------------ --------- ------------------ ------ ---- --- ---------- --------------- -- ------ ----- --------- --
在上述代码中，我们向 providers 数组注册了 CustomInterceptor，并将其标记为 HTTP_INTERCEPTORS，这是一个注入令牌，用于将拦截器注册到 Angular 的 DI（依赖注入）系统中。我们还将 multi 参数标记为 true ，以支持多个拦截器。
Http 响应的处理
在拦截器中，我们可以对传入的响应进行各种操作，例如：
添加标头
我们可以通过使用 set() 方法，在响应头中添加标头：
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') });
return next.handle(request);
}上述代码在标头中添加了 Content-Type: application/json 标头。
修改响应格式
我们可以使用 map() 运算符修改传入的响应，并将其转换为特定格式：
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request).pipe(
map((response: HttpResponse<any>) => {
// 在这里，我们可以将响应转换为特定的格式
return response;
})
);
}处理错误
我们可以使用 catchError() 运算符捕获发生的错误，并返回一个能够处理错误的 Observable：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------
------------------ ----------------- ----- ------------- -------------------------- -
------ --------------------------
------------------ ------------------ -- -
-- ------------
--------------- ----- ----------- -------
------ ------------------
--
--
-上述代码使用 catchError() 操作符捕获错误，并在控制台上打印错误。
拦截器链
请注意，应用程序中可以有多个拦截器。在这种情况下，这些拦截器将形成一个拦截器链。在拦截器链中，拦截器按注册顺序依次执行。第一个拦截器会执行处理逻辑，然后将请求传递给拦截器链中的下一个拦截器。最后一个拦截器将处理响应，然后将其返回给调用者。
最佳实践
以下是拦截器使用的一些建议和最佳实践：
- 共享信息：如果您需要在多个请求之间共享信息，请将其存储在应用程序级别上。例如，您可以使用一个服务来处理全局状态和行为。
- 避免循环：避免循环或递归，以免出现拦截器之间的死循环。如果您需要遍历打开响应并应用变换，可以添加一个命名方案以避免无限迭代。
- 管道：使用管道对请求和响应数据进行转换，因为它可以轻松实现连续转换。使用管道而不是直接在拦截器中转换数据。
- 减少操作：保持拦截器轻量级，尽可能减少不必要的转换和操作。过多的处理会损失性能，并增加了逻辑错误的风险。
- 错误处理：在拦截器中捕获和处理错误。通常，我们应该捕获错误并将其转换为可读的错误消息，然后将控制权返回给调用方，而不是让错误扩散到整个应用程序中。
- 只拦截需要的请求和响应：只拦截需要的请求和响应，并尽可能减少拦截的数量。
结论
Angular 框架提供了一个强大的机制，使得对传入的 http 响应进行拦截和处理变得非常简单。通过实现 HttpInterceptor 接口，并注入到应用程序的 providers 数组中，我们可以拦截传入的 http 请求，并对其进行处理或修改。此外，遵循一些最佳实践可以使拦截器更加清晰、健壮、可维护和易于测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f24858a44b36ee57654aaf