Angular是一款流行的JavaScript框架，用于构建Web应用程序。在前后端分离的开发模式下，经常需要向后端API发送请求和接收响应数据。本文将深入介绍Angular中如何对请求进行拦截封装。
1. 什么是拦截器？
在介绍拦截器之前，我们先了解一下什么是拦截器。Angular拦截器是一些可重用的代码片段，用于截取和转换从应用程序发送到服务端或从服务端接收到的HTTP请求和响应。它可以简化HTTP请求的处理流程，提供统一的处理机制，从而减少代码的重复和冗余。
2. Angular中的HTTP请求拦截器
Angular中可以使用HTTP拦截器截取HTTP请求，进行请求的修改、转换，或者在请求发生之前执行其它操作。HTTP请求拦截器需要实现HttpInterceptor接口，并重写其中的intercept方法。下面是一个示例：
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
intercept(req: HttpRequest, next: HttpHandler) {
// 在请求发出之前执行一些操作
console.log('Intercepted HTTP Request: ', req);
// 请求正常发送到接收响应的下一个拦截器
return next.handle(req);
}
}
在上述示例代码中，我们定义了一个名为`MyHttpInterceptor`的拦截器，并实现了`intercept`方法。该方法接收两个参数：`req`和`next`。其中，`req`参数是接收到的HTTP请求，`next`参数是用于将请求转发到下一个拦截器的处理器。
在`intercept`方法中，我们可以执行各种任务，例如：修改请求头、添加Token、设置参数、打印请求信息等。还可以在请求被发送之前或之后执行某些操作。
当所有拦截器执行完毕后，最终的处理程序将处理HTTP请求并返回响应。如果其中的任何拦截器调用了`next.handle(req)`方法，则它实际上正在调用下一个拦截器，或者如果这是最后一个拦截器，则请求将被发送并返回响应到处理上下文。
3. Angular中的HTTP响应拦截器
与HTTP请求拦截器类似，HTTP响应拦截器截取后端API返回的响应，进行修改或者转换，或者在响应到达之后执行其它操作。HTTP响应拦截器需要实现HttpInterceptor接口，并重写其中的intercept方法。下面是一个示例：
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
intercept(req: HttpRequest, next: HttpHandler) {
return next.handle(req).pipe(
catchError((error: HttpErrorResponse) => {
// 在请求发生错误时执行一些操作
console.log('Intercepted HTTP Response Error: ', error);
// 返回错误信息
return throwError(error);
})
);
}
}
在上述示例代码中，我们定义了一个名为`MyHttpInterceptor`的拦截器，并实现了`intercept`方法。该方法接收两个参数：`req`和`next`。其中，`req`参数是接收到的HTTP请求，`next`参数是用于将请求转发到下一个拦截器的处理器。
在`intercept`方法中，我们使用`pipe`操作符来处理请求。`catchError`可以用于捕获请求发生的错误，并返回一个可观察对象，以便在观察者（例如组件）中使用。在本示例中，我们发现请求错误，输出错误信息，并返回一个可被观察者订阅的错误对象。
4. 在Angular应用程序中使用拦截器
在Angular中使用拦截器非常简单。我们只需要定义一个或多个拦截器，并在应用程序提供商（AppModule）中将它们作为依赖项添加到提供商中即可。
下面是一个示例：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { MyHttpInterceptor } from './my-http-interceptor';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [{ provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true }],
bootstrap: [AppComponent]
})
export class AppModule { }
在上述示例中，我们在提供商中添加了一个名为`MyHttpInterceptor`的拦截器，并设置`multi`为true，以确保在应用程序中添加一个或多个拦截器时，它们都将作为一个依赖项进行注入。这样我们在AppComponent组件及其子组件中就可以直接使用HTTP服务，而不需要关心拦截器的具体实现。
5. 结论
在本文中，我们介绍了Angular中如何使用HTTP拦截器来截取HTTP请求和响应。我们还看到了如何将拦截器作为依赖注入到应用程序中，并且如何在响应错误时进行处理。尽管本文只是入门级别的介绍，但我们仍然可以看到拦截器对于开发高效的Angular应用程序的重要性。