通过拦截http请求（HttpInterceptors）创建一个公共加载器

Question

我在离子3中创建了一个常见的加载器，但由于手动使用loader.dismiss()存在问题

而不是在离子的非常loaderCtrl请求中使用http创建一个加载器我计划只制作一个加载器。我正在使用httpInterceptor，当请求被截获时，我创建并呈现加载器。我检查事件是否为HttpRequest类型，如果是，则加载器被解除。

当只在任何页面上发出http请求时，这种方法正常工作，即请求被截获时，加载器在获得响应时将被提取，并且加载器被解除。

但是现在如果在1页上有2个请求我登上了找不到removeView的错误。

/loader interceptor.同时

@Injectable()
  export class HttpLoaderInterceptor implements HttpInterceptor {

  headersConfig: any;
  loader: any

  constructor(public loadingCtrl: LoadingController) { }

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

    this.loader = this.loadingCtrl.create({
    content: "Please wait",
    });
   this.loader.present()


 return next.handle(req).pipe(tap((event: HttpEvent<any>) => {
  if (event instanceof HttpResponse) {
      this.loader.dismiss();
  }
},
  (err: any) => {
      this.loader.dismiss();
       }));

 }
}

dismiss方法被调用两次，因为获得了2个响应，第二次没有加载器被解除，因此我们得到一个错误。请帮忙。

Answer 1

在我看来，加载条之前请求成功的原因，所以我创建了一个服务用来解决它。我的源代码如下：

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  private loaders = [];
  private badLoaders = 0;

  constructor(
      private loadingController: LoadingController
  ) {
  }

  async startLoading() {
      if (this.badLoaders > 0) {
          this.badLoaders --;
      } else {
          await this.loadingController.create({
              message: 'Loading ...',
          }).then(loader => {
              this.loaders.push(loader);
              loader.present().then(() => {
                  if (this.badLoaders > 0) {
                      this.badLoaders --;
                      this.endLoading();
                  }
              });
          });
      }
  }

  endLoading() {
      let loader = this.loaders.pop();
      if (loader) {
          loader.dismiss();
      } else {
          this.badLoaders ++;
      }
  }

}

您可以尝试使用LoadingService.startLoading而不是this.loadingCtrl.create和LoadingService.endLoading而不是this.loader.dismiss();。