ionic3+angular4 HttpClient 攔截器

1、建立攔截器

ionic g provider interceptor

具體内容

import {

HttpEvent,

HttpHandler,

HttpInterceptor,

HttpRequest,

HttpResponse

} from "@angular/common/http";

import { Injectable } from "@angular/core";

import { catchError, tap, mergeMap } from "rxjs/operators";

import { Observable } from "rxjs";

import { ToastController, LoadingController } from "ionic-angular";

import { ErrorObservable } from "rxjs/observable/ErrorObservable";



@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>> {

/**

* 請求前置處理

*/

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;

}

// let toastView = this.toastCtrl.create({

// message: msg,

// duration: 3000,

// position: "middle",

// dismissOnPageChange: true

// });

// toastView.present();

}

),

catchError((err: any) => {

return Observable.throw(err.message);

})

);

//下面的寫法也可以  隻是對異常的處理方式不同

// return next.handle(authRequest).pipe(

// mergeMap((event: any) => {

// loadingView.dismiss();

// if (event instanceof HttpResponse && event.status != 200) {

// return ErrorObservable.create(event);

// }



// return Observable.create(observer => observer.next(event));

// }),

// catchError((err: HttpResponse<any>) => {

// return ErrorObservable.create(err);

// })

// );

}

}
           

2、在app.module.ts中引用,主要代碼如下

import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
import { InterceptorProvider } from "../providers/interceptor/interceptor";


providers: [

{ provide: HTTP_INTERCEPTORS, useClass: InterceptorProvider, multi: true }

]