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