Angular 4 HttpInterceptor :显示和隐藏加载器

Question

我已经实现了 HttpInterceptor 接口，以便拦截传出请求和传入响应。

我想在创建请求时显示加载器，并在收到响应时隐藏该加载器。

虽然下面的代码在检测到 HttpResponse 时有效，但它不会检测到 Http 故障(当响应代码不同于 200 时(，因此，加载程序不会被隐藏。

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private loaderService: LoaderService) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.loaderService.show();
return next
.handle(req)
.do(event => {
//nothing is printed when a Http failure occurs
console.log('detecting event ', event);
if (event instanceof HttpResponse) {
console.log('detecting http response');
this.loaderService.hide();
}
});
}
}

Answer 1

我建议只是添加一个 finally 运算符，它可以在成功和错误的情况下完成工作：

import 'rxjs/add/operator/finally';
// ...
.finally(()=> this.loaderService.hide())

Answer 2

接下来尝试将带有 catch 的错误处理添加到可观察量

：

.catch((error: any) => {
if (error instanceof HttpErrorResponse) {
this.loaderService.hide();
// show the error to the user here
} else {
return Observable.throw(error);
}
})

Answer 3

由 .do 方法创建的可观察量对源发出的每个值、错误和完成执行副作用。实际上，它会监视原始的可观察对象，并在看到某些事情发生时触发这些副作用。

请参阅此处的文档。

您可以通过为错误添加处理程序来执行自己的操作，就像您已经对示例中的值执行的操作一样：

return next
.handle(req)
.do(event => {
//nothing is printed when a Http failure occurs
console.log('detecting event ', event);
if (event instanceof HttpResponse) {
console.log('detecting http response');
this.loaderService.hide();
}
}, (err: any) => {
console.log('... error occurred');
this.loaderService.hide();
});

在这种情况下，还可能使用完成副作用。