Angular 4 HttpInterceptor : show and hide loader

Question

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

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

虽然下面的代码在检测到 HttpResponse 时有效，但它没有检测到 Http Failure(当响应代码不同于 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())