1：为啥要使用拦截器 httpClient 请求响应处理，其作用我们主要是：
目前我的Angular版本是Angular 17.3，版本中实现请求和响应的拦截处理了。这种机制非常适合添加如身份验证头、错误统一处理、日志记录等功能。
======具体的操作步骤=======
2：注入服务：ng g s services/myhttp-interceptorService
1 import { Injectable } from '@angular/core'; 2 import { HttpResponse, HttpRequest, HttpInterceptor, HttpHandler, HttpEvent } from '@angular/common/http'; 3 import { Observable, tap } from 'rxjs'; 4 5 @Injectable({ 6 providedIn: 'root' 7 }) 8 // 用作http 请求响应的拦截器 9 export class MyhttpInterceptorServiceService implements HttpInterceptor { 11 constructor() { } 12 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 13 // 请求前处理，可以加上 head 的token 如果需要 14 //console.log('Request:', req.url); 15 console.log('Request:=======请求前的处理=========' + req.url); 16 if (!req.headers.has('Authorization')) { 17 req = req.clone({ 18 setHeaders: { 19 Authorization: 'Bearer ' + localStorage.getItem('logininfo') 20 } 21 }); 22 console.log("请求头新增token 成功 Authorization-----------"); 23 } else { 24 console.log("已经存在token,不需要新增"); 25 } 26 // 发送请求，并且在响应上做文章 27 return next.handle(req).pipe( 28 tap( 29 event => { 30 if (event instanceof HttpResponse) { 31 // 成功响应时的处理 32 //console.log('Response:', event.status); 33 console.log('Response:====成功响应的处理============'); 34 } 35 }, 36 error => { 37 // 错误响应时的处理 38 //console.error('Error:', error.message); 39 console.error('Error', '=======error msg========='); 40 } 41 ) 42 ); 43 } 44 }
3：配置到根模块中 app.module.ts
1 import { NgModule } from '@angular/core'; 2 import { BrowserModule } from '@angular/platform-browser'; 3 4 import { AppRoutingModule } from './app-routing.module'; 5 import { AppComponent } from './app.component'; 6 import { HomeComponent } from './components/home/home.component'; 7 import { TopComponent } from './components/top/top.component'; 8 import { MenuComponent } from './components/menu/menu.component'; 9 import { ProductComponent } from './components/product/product.component'; 10 11 12 //primeng 13 import {ButtonModule} from 'primeng/button'; 14 import { FormsModule } from '@angular/forms'; 15 import {CalendarModule} from 'primeng/calendar'; 16 import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 17 18 import {PanelMenuModule} from 'primeng/panelmenu'; 19 import { BodyComponent } from './components/body/body.component'; 20 21 import {TableModule} from 'primeng/table' 22 import {InputTextModule} from 'primeng/inputtext'; 23 import {MessageModule} from 'primeng/message'; 24 import {ToastModule} from 'primeng/toast'; 25 26 import { TranslateModule,TranslateLoader } from '@ngx-translate/core'; 27 import { HttpClient, HttpClientModule } from '@angular/common/http'; 28 import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 29 import { MydialogComponent } from './components/mydialog/mydialog.component'; 30 import { MybooksComponent } from './components/mybooks/mybooks.component'; 31 import { StudentComponent } from './components/student/student.component'; 32 import { TeacherComponent } from './components/teacher/teacher.component'; 33 import { WelcomeComponent } from './components/welcome/welcome.component'; 34 import { LoginComponent } from './components/login/login.component'; 35 36 //HttpClientModule, HTTP_INTERCEPTORS -----拦截器的导入 37 import { HTTP_INTERCEPTORS } from '@angular/common/http'; 38 import { MyhttpInterceptorServiceService } from './services/myhttp-interceptor-service.service'; 39 40 export function HttpLoaderFactory(http: HttpClient) { 41 return new TranslateHttpLoader(http,'../assets/i18n/',".json"); 42 } 43 @NgModule({ 44 declarations: [ 45 AppComponent, 46 HomeComponent, 47 TopComponent, 48 MenuComponent, 49 ProductComponent, 50 BodyComponent, 51 MydialogComponent, 52 MybooksComponent, 53 StudentComponent, 54 TeacherComponent, 55 WelcomeComponent, 56 LoginComponent 57 ], 58 imports: [ 59 BrowserModule, 60 AppRoutingModule, 62 BrowserAnimationsModule, 64 ButtonModule, 65 FormsModule, 66 CalendarModule, 68 PanelMenuModule, 70 TableModule, 71 InputTextModule, 72 MessageModule, 73 ToastModule, 74 75 HttpClientModule,TranslateModule.forRoot({ 76 loader: { 77 provide: TranslateLoader, 78 useFactory: HttpLoaderFactory, 79 deps: [HttpClient] 80 } 81 }) 84 ], 85 providers: [{ 86 provide: HTTP_INTERCEPTORS, //--------------- 87 useClass: MyhttpInterceptorServiceService, 88 multi: true // 注意这里设置为true，因为可以有多个拦截器 89 }], 90 bootstrap: [AppComponent] 91 }) 92 export class AppModule { }
//重点如下配置：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，因为可以有多个拦截器 }],
4：在组件中测试使用
1 <p>student works! 请求接口获取到用户名称为：{{userName}}</p> 2 3 import { Component, OnInit } from '@angular/core'; 4 import { HttpClient } from '@angular/common/http'; 5 import { Injectable } from '@angular/core'; 6 @Component({ 7 selector: 'app-student', 8 templateUrl: './student.component.html', 9 styleUrl: './student.component.scss' 10 }) 11 export class StudentComponent implements OnInit { 12 userName: string; 13 constructor(private http: HttpClient) { 14 this.userName = ""; 15 } 16 ngOnInit(): void { 17 this.http.get('http://www.baidu.com:4200/gateway/basic/accounts/getUserAcountList?ntid=3793831').pipe().subscribe((data?: any) => { 18 console.log(data); 19 this.userName = data.data[0].name; 20 }) 21 } 22 }
5:测试效果
