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,

next: HttpHandler

): Observable> {

/**

* 请求前置处理

*/

let loadingView = this.loadingCtrl.create({

spinner: "hide",

content: ``,

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) => {

// 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 }

]