Angular專案簡單使用攔截器 httpClient 請求響應處理

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

目前我的Angular版本是Angular 17.3，版本中實現請求和響應的攔截處理了。這種機制非常適合新增如身份驗證頭、錯誤統一處理、日誌記錄等功能。

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

2：注入服務：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 請求響應的攔截器
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("已經存在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=========');
        }
      )
    );
  }
}

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 -----攔截器的匯入
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   // 注意這裡設定為true，因為可以有多個攔截器
  }],
  bootstrap: [AppComponent]
})
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：在元件中測試使用

<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;
    })
  }
}

5:測試效果