IONIC 4-在Http拦截器中加载控制器...由于异步调用，无法正确创建和关闭

Question

我想为每个http调用创建加载程序，并在有响应时将其关闭。...尝试了一些代码.....这有时表明彼此之间有多个加载程序...快照有代码.. < / p>

interceptor.ts

intercept(request: HttpRequest < any >, next: HttpHandler): Observable < HttpEvent < any >> {

  request = request.clone({
    headers: request.headers.set('Accept', 'application/json')
  });
  this.commonServices.showLoader();
  return next.handle(request).pipe(
    map((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        this.commonServices.hideLoader();
      }
      return event;
    }),
    catchError((error: HttpErrorResponse) => {
      this.commonServices.hideLoader();
      if (error.status === 401) {
        this.storage.clear();
        this.router.navigate(['login']);
        if (error.error.success === false) {
          this.commonServices.forToast("Login failed");
        } else {
          //this.router.navigate(['login']);
        }
      }
      return throwError(error);
    }));
}

CommonService.service.ts

async showLoader() {
      if (!this.loader) {
          this.loader = await this.loadingController.create({ message: 'Loading' });
      }
      await this.loader.present();
  }

  async hideLoader() {
      if (this.loader) {
          await this.loader.dismiss();
          this.loader = null;
      }
  }