return next.handle(jwtReq).mergeMap((event: any) => { if (event instanceof HttpResponse && event.body.code !== 0) { return Observable.create(observer => observer.error(event)); } return Observable.create(observer => observer.next(event)); })
只会在请求成功才会返回一个 HttpResponse 类型，因此，我们可以大胆判断是否来源于 HttpResponse 来表示HTTP请求已经成功。
这里，统一对业务层级的错误 code !== 0 产生一个错误信号的 Observable。反之，产生一个成功的信息。
catch
catch 来捕获非200以外的其他状态码的错误，比如：401。同时，前面的 mergeMap 所产生的错误信号，也会在这里被捕获到。
.catch((res: HttpResponse<any>) => { switch (res.status) { case 401: // 权限处理 location.href = ''; // 重新登录 break; case 200: // 业务层级错误处理 alert('业务错误：' + res.body.code); break; case 404: alert('API不存在'); break; } return Observable.throw(res); })
4、完整代码
至此，拦截器所要包括的身份认证token、统一响应处理、异常处理都解决了。
@Injectable() export class JWTInterceptor implements HttpInterceptor { constructor(private notifySrv: NotifyService) {} intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> { console.log('interceptor') const jwtReq = req.clone({ headers: req.headers.set('token', 'asdf') }); return next .handle(jwtReq) .mergeMap((event: any) => { if (event instanceof HttpResponse && event.body.code !== 0) { return Observable.create(observer => observer.error(event)); } return Observable.create(observer => observer.next(event)); }) .catch((res: HttpResponse<any>) => { switch (res.status) { case 401: // 权限处理 location.href = ''; // 重新登录 break; case 200: // 业务层级错误处理 this.notifySrv.error('业务错误', `错误代码为：${res.body.code}`); break; case 404: this.notifySrv.error('404', `API不存在`); break; } // 以错误的形式结束本次请求 return Observable.throw(res); }) } }
发现没有，我们并没有加一大堆并不认识的事物，单纯都只是对数据流的各种操作而已。
NotifyService 是一个无须依赖HTML模板、极简Angular通知组件。
5、注册拦截器
拦截器构建后，还需要将其注册至 HTTP_INTERCEPTORS 标识符中。
import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ HttpClientModule ], providers: [ { provide: HTTP_INTERCEPTORS, useClass: JWTInterceptor, multi: true} ] })
以上是拦截器的所有内容，在不改变原有的代码的情况下，我们只是利用短短几行的代码实现了身份认证所需要的TOKEN、业务级统一响应处理、错误处理动作。
四、async 管道
一个 Observable 必须被订阅以后才会真正的开始动作，前面在HTML模板中我们利用了 async 管道简化了这种订阅过程。
{{ user | async | json }}
它相当于：
let user: User; get() { this.http.get<User>('/assets/data/user.json').subscribe(res => { this.user = res; }); } {{ user | json }}
然而，async 这种简化，并不代表失去某些自由度，比如说当在获取数据过程中显示【加载中……】，怎么办？
<div *ngIf="user | async as user; else loading"> {{ user | json }} </div> <ng-template #loading>加载中……</ng-template>
恩！
五、结论
Angular在HTTP请求过程中使用 Observable 异步数据流控制数据，而利用 rxjs 提供的大量操作符，来改变最终值；从而获得在应用层面最优雅的编码风格。
当我们说到优雅使用HTTP这件事时，易测试是一个非常重要，因此，我建议将HTTP从组件类中剥离并将所有请求放到 Service 当中。当对某个组件编写测试代码时，如果受到HTTP请求结果的限制会让测试更困难。