在Angular项目开发中，拦截器（HttpInterceptor）是处理HTTP请求与响应的核心工具，尤其适合统一管理全局逻辑，例如自动附加认证Token、集中处理错误信息以及记录请求日志等场景。当前采用Angular 17.3版本，该版本已原生支持拦截器机制，配置流程简洁直观，能够有效提升开发效率。
下面直接进入具体操作步骤。
1：为何使用拦截器处理 httpClient 请求与响应，其核心价值主要体现在：
拦截器允许你在请求发出之前或响应返回之后注入自定义逻辑。例如在请求头中自动携带认证Token，或者在捕获401错误时引导用户跳转至登录页面。这种做法的优势在于：业务代码中无需反复编写这些通用逻辑，只需一次配置，即可全局生效，大幅提升代码复用性与维护性。
2：创建拦截器服务：ng g s services/myhttp-interceptorService
首先通过Angular CLI生成一个服务类，用于实现拦截器接口。注意，该服务必须实现HttpInterceptor接口，并重写其中的intercept方法，以便嵌入自定义处理逻辑。
import { Injectable } from '@angular/core';
import { HttpResponse, HttpRequest, HttpInterceptor, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable, tap } from 'rxjs';
@Injectable({
providedIn: 'root'
})
// 用作http 请求响应的拦截器
export class MyhttpInterceptorServiceService implements HttpInterceptor {
constructor() { }
intercept(req: HttpRequest, next: HttpHandler): Observable> {
// 请求前处理，可以加上 head 的token 如果需要
//console.log('Request:', req.url);
console.log('Request:=======请求前的处理=========' + req.url);
if (!req.headers.has('Authorization')) {
req = req.clone({
setHeaders: {
Authorization: 'Bearer ' + localStorage.getItem('logininfo')
}
});
console.log("请求头新增token 成功 Authorization-----------");
} else {
console.log("已经存在token,不需要新增");
}
// 发送请求，并且在响应上做文章
return next.handle(req).pipe(
tap(
event => {
if (event instanceof HttpResponse) {
// 成功响应时的处理
//console.log('Response:', event.status);
console.log('Response:====成功响应的处理============');
}
},
error => {
// 错误响应时的处理
//console.error('Error:', error.message);
console.error('Error', '=======error msg=========');
}
)
);
}
}
上述代码主要完成两项任务：首先检查请求头中是否已存在Authorization字段，若不存在则从localStorage中获取Token并自动添加；随后在响应端利用tap操作符分别处理成功与失败的响应结果。在实际项目中，你还可以在错误处理环节根据HTTP状态码执行页面跳转或用户提示等操作。
3：在根模块中注册拦截器 app.module.ts
拦截器编写完成后，还需要在根模块中将其注册到HTTP_INTERCEPTORS提供者数组中。请特别注意multi: true这一配置项，因为它允许项目中同时存在多个拦截器并协同工作。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { TopComponent } from './components/top/top.component';
import { MenuComponent } from './components/menu/menu.component';
import { ProductComponent } from './components/product/product.component';
//primeng
import {ButtonModule} from 'primeng/button';
import { FormsModule } from '@angular/forms';
import {CalendarModule} from 'primeng/calendar';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {PanelMenuModule} from 'primeng/panelmenu';
import { BodyComponent } from './components/body/body.component';
import {TableModule} from 'primeng/table'
import {InputTextModule} from 'primeng/inputtext';
import {MessageModule} from 'primeng/message';
import {ToastModule} from 'primeng/toast';
import { TranslateModule,TranslateLoader } from '@ngx-translate/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { MydialogComponent } from './components/mydialog/mydialog.component';
import { MybooksComponent } from './components/mybooks/mybooks.component';
import { StudentComponent } from './components/student/student.component';
import { TeacherComponent } from './components/teacher/teacher.component';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { LoginComponent } from './components/login/login.component';
//HttpClientModule, HTTP_INTERCEPTORS -----拦截器的导入
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyhttpInterceptorServiceService } from './services/myhttp-interceptor-service.service';
export function HttpLoaderFactory(https: HttpClient) {
return new TranslateHttpLoader(http,'../assets/i18n/',".json");
}
@NgModule({
declarations: [
AppComponent,
HomeComponent,
TopComponent,
MenuComponent,
ProductComponent,
BodyComponent,
MydialogComponent,
MybooksComponent,
StudentComponent,
TeacherComponent,
WelcomeComponent,
LoginComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
ButtonModule,
FormsModule,
CalendarModule,
PanelMenuModule,
TableModule,
InputTextModule,
MessageModule,
ToastModule,
HttpClientModule,TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [{
provide: HTTP_INTERCEPTORS, //---------------
useClass: MyhttpInterceptorServiceService,
multi: true // 注意这里设置为true，因为可以有多个拦截器
}],
bootstrap: [AppComponent]
})
export class AppModule { }
重点关注providers部分的配置，具体代码如下：
//重点如下配置：HttpClientModule, HTTP_INTERCEPTORS 拦截器的导入
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyhttpInterceptorServiceService } from './services/myhttp-interceptor-service.service';
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: MyhttpInterceptorServiceService,
multi: true // 注意这里设置为true，因为可以有多个拦截器
}],
完成上述配置后，所有通过Angular HttpClient发起的HTTP请求都将自动经过此拦截器，实现统一处理。
4：在组件中测试拦截器效果
直接在组件中注入HttpClient并发起请求，即可验证拦截器是否正常工作。以下是一个简单的测试组件示例：
student works! 请求接口获取到用户名称为：{{userName}}
import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; @Component({ selector: 'app-student', templateUrl: './student.component.html', styleUrl: './student.component.scss' }) export class StudentComponent implements OnInit { userName: string; constructor(private https: HttpClient) { this.userName = ""; } ngOnInit(): void { this.http.get('https://www.baidu.com:4200/gateway/basic/accounts/getUserAcountList?ntid=3793831').pipe().subscribe((data?: any) => { console.log(data); this.userName = data.data[0].name; }) } }
请确保在app.module.ts的declarations数组中注册了该组件。启动项目后，打开浏览器控制台，若请求头中已自动包含Authorization字段，则表明拦截器已成功生效。
5:测试验证与效果展示
请求发出后，我们可以在控制台中看到拦截器打印的请求处理日志，同时响应端也会正常输出成功信息。如果服务端返回错误，拦截器将自动捕获并打印相关错误详情。
以上就是Angular项目中使用拦截器处理httpClient请求与响应的完整实现流程。从生成服务、编写拦截逻辑，到配置模块、测试验证，每个环节都清晰明了，能够帮助开发者快速将其集成到现有项目中，实现HTTP请求的统一管理与优化。
