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

Question

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

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

虽然下面的代码在检测到 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())