在前端项目中我们往往需要对每次请求做一些统一的处理,比如请求结果session过期处理,在header头部加上验证参数token等等,这个时候就需要用到拦截器。
由于angular中http请求,依赖@angular/common/http模块,将HttpInterceptor,HttpRequest,HttpResponse等对象引入
1 2 3 4 5 6 7 8 | import {
HttpInterceptor,
HttpRequest,
HttpHandler,
HttpErrorResponse,
HttpHeaderResponse,
HttpResponse,
} from '@angular/common/http' ;
|
引入模块后,我们要实现HttpInterceptor接口
1 2 3 | export class MyInterceptor implements HttpInterceptor {
constructor (){}
}
|
具体的拦截器部分实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 | intercept(request: HttpRequest<any>, next: HttpHandler): Observable<
| HttpHeaderResponse
| HttpResponse<any>
> { <br>
let req = request.clone({param1: '' ,param2: '' }); //这里可以在请求中加参数
return next.handle(req).pipe( mergeMap((event: any) => {
// 正常返回,处理具体返回参数
if (event instanceof HttpResponse && event.status === 200)
return this .handleData(event); //具体处理请求返回数据
return of(event);
}),
catchError((err: HttpErrorResponse) => this .handleData(err)))
}
|
在平常我们的业务中往往服务端返回200,但是有可能是业务上出错,比如说请求的参数不对,session过期没有通过验证等等,这个时候需要我们做统一处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | private handleData(
event: HttpResponse<any> | HttpErrorResponse,
): Observable<any> {
// 业务处理:一些通用操作
switch (event.status) {
case 200:
if (event instanceof HttpResponse) {
const body: any = event.body;
if (body && body.rc == 3) {
this .goTo( '/test' );
}
}
break ;
case 401: // 未登录状态码
this .goTo( '/login' );
break ;
case 404:
case 500:
……
break ;
default :
return of(event);
}
|
这里我们对不同返回状态做同的统一处理。
最后我们将拦截器模块引入到app.module.ts跟模块中。基本就完成了
1 2 3 4 5 6 7 | import { MyInterceptor } from './myIntercept'
@NgModule({
……
providers: [{ provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi:
true }]
……
})
|
注:本文部分代码参考了ng-alain中拦截器的写法,如果想了解可以参考https://github.com/cipchk/ng-alain