ionic3 + angular5 添加http請求攔截器

注：此攔截器只能攔截HttpClient，不能攔截Http

1、創建攔截器

ng g provider interceptor

2、修改攔截器內容
 

import {
  HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse
} from "@angular/common/http";
import {Injectable} from "@angular/core";
import {catchError, tap} from "rxjs/operators";
import {Observable} from "rxjs";
import {ToastController, LoadingController} from "ionic-angular";

@Injectable()
export class InterceptorProvider implements HttpInterceptor {

  private timeoutMillis = 3000;

  constructor(
    private toastCtrl: ToastController,
    private loadingCtrl: LoadingController
  ) {
  }

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    console.log('終於攔截到了。。。', request.url);
    /**
     * 請求前置處理
     */
    let loadingView = this.loadingCtrl.create({
      spinner: "hide",
      content: `<img src="./assets/imgs/loading.gif" style="height:105px;width:180px;"></img>`,
      dismissOnPageChange: false
    });

    loadingView.present();
    let token = window.localStorage.getItem("token");
    const authRequest = request.clone({
      headers: request.headers.set("Authorization", "Bearer " + token)
    });

    return next
      .handle(authRequest)
      .timeout(this.timeoutMillis)
      .pipe(
        tap(
          event => {
            if (event instanceof HttpResponse) {
              /**
               * 請求後置處理
               */
              loadingView.dismiss();
            }
          },
          error => {
            /**
             * 請求異常處理
             */
            loadingView.dismiss();
            let msg = "請求失敗";
            switch (error.status) {
              case 0:
                msg = "請求地址錯誤";
                break;
              case 400:
                msg = "請求無效，請檢查參數類型是否匹配";
                break;
              case 404:
                msg = "請求資源不存在，請檢查路徑是否正確";
                break;
              default:
                break;
            }
          }
        ),
        catchError((err: any) => {
          return Observable.throw(err.message);
        })
      );
  }
}

3、將攔截器添加到app.module.ts

@NgModule({
  imports: [
    HttpClientModule, HttpModule,
  ],
  providers: [
    ...
    {provide:HTTP_INTERCEPTORS,useClass:InterceptorProvider,multi:true},
    ...
  ]
})
export class AppModule {
}