快捷導(dǎo)航

Angular項目如何使用攔截器?httpClient?請求響應(yīng)處理

更新時間：2024年06月19日 09:31:06 作者：天天向上518

這篇文章主要介紹了Angular項目簡單使用攔截器httpClient請求響應(yīng)處理,目前我的Angular版本是Angular?17.3,版本中實現(xiàn)請求和響應(yīng)的攔截處理了,這種機(jī)制非常適合添加如身份驗證頭、錯誤統(tǒng)一處理、日志記錄等功能,需要的朋友可以參考下

1：為啥要使用攔截器 httpClient 請求響應(yīng)處理，其作用我們主要是：

目前我的Angular版本是Angular 17.3，版本中實現(xiàn)請求和響應(yīng)的攔截處理了。這種機(jī)制非常適合添加如身份驗證頭、錯誤統(tǒng)一處理、日志記錄等功能。

======具體的操作步驟=======

2：注入服務(wù)：ng g s services/myhttp-interceptorService

 import { Injectable } from '@angular/core';
  import { HttpResponse, HttpRequest, HttpInterceptor, HttpHandler, HttpEvent } from '@angular/common/http';
  import { Observable, tap } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  // 用作http 請求響應(yīng)的攔截器
  export class MyhttpInterceptorServiceService implements HttpInterceptor {
   constructor() { }
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     // 請求前處理，可以加上 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("已經(jīng)存在token,不需要新增");
     }
     // 發(fā)送請求，并且在響應(yīng)上做文章
     return next.handle(req).pipe(
       tap(
         event => {
           if (event instanceof HttpResponse) {
             // 成功響應(yīng)時的處理
             //console.log('Response:', event.status);
             console.log('Response:====成功響應(yīng)的處理============');
           }
         },
         error => {
           // 錯誤響應(yīng)時的處理
           //console.error('Error:', error.message);
           console.error('Error', '=======error msg=========');
         }
       )
     );
   }
 }

3：配置到根模塊中 app.module.ts

 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 -----攔截器的導(dǎo)入
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { MyhttpInterceptorServiceService } from './services/myhttp-interceptor-service.service';
 export function HttpLoaderFactory(http: 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   // 注意這里設(shè)置為true，因為可以有多個攔截器
   }],
   bootstrap: [AppComponent]
})
export class AppModule { }

//重點如下配置：HttpClientModule, HTTP_INTERCEPTORS 攔截器的導(dǎo)入
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyhttpInterceptorServiceService } from './services/myhttp-interceptor-service.service';
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: MyhttpInterceptorServiceService,
    multi: true   // 注意這里設(shè)置為true，因為可以有多個攔截器
  }],

4：在組件中測試使用

<p>student works! 請求接口獲取到用戶名稱為：{{userName}}</p>
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 http: HttpClient) {
    this.userName = "";
  }
  ngOnInit(): void {
    this.http.get('http://www.baidu.com:4200/gateway/basic/accounts/getUserAcountList?ntid=3793831').pipe().subscribe((data?: any) => {
      console.log(data);
      this.userName = data.data[0].name;
    })
  }
}