Angular项目如何使用拦截器 httpClient 请求响应处理

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

 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，因为可以有多个拦截器
  }],

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