angular4 httpclient攔截器

1.創建服務：

InterceptorService.ts

　　

import { Injectable } from '@angular/core';
import { HttpEvent,HttpInterceptor,HttpHandler,HttpRequest,HttpResponse} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
import { catchError } from 'rxjs/operators';
import { mergeMap } from 'rxjs/operators';
@Injectable()
export class InterceptorService implements HttpInterceptor{

  intercept(req:HttpRequest<any>,next:HttpHandler):Observable<HttpEvent<any>>{
    const authReq = req.clone({
      url: (req.url + '&token=ujusaruu19')  //對任意請求的url添加token參數
    });

    return next.handle(authReq).pipe(mergeMap((event: any) => {
        if (event instanceof HttpResponse && event.status != 200) {
          return ErrorObservable.create(event);
        }
        return Observable.create(observer => observer.next(event)); //請求成功返回響應
      }),
      catchError((res: HttpResponse<any>) => {   //請求失敗處理
        switch (res.status) {
          case 401:
            break;
          case 200:
            console.log('業務錯誤');
            break;
          case 404:
            break;
          case 403:
            console.log('業務錯誤');
            break;
        }
        return ErrorObservable.create(event);
      }));
  }
}

　　2.導入提供器中，app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import {InterceptorService} from "./interceptor.service";
import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
import { TestComponent } from './test/test.component';


@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    {provide:HTTP_INTERCEPTORS,useClass:InterceptorService,multi:true}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

　　3.結束，在組件中使用httpClient請求會自動攔截，攔截處理在InterceptorService.ts操作