Question

我正在Ionic 3中创建一个通用加载程序，但是由于手动使用loader.dismiss()

而出现问题

在离子技术中，不是针对非常loaderCtrl的请求使用http创建加载程序，而是计划仅制作一个加载程序。我使用的是httpInterceptor，当请求被拦截时，我创建并显示了加载器。然后我检查事件是否为HttpRequest类型，如果是，则将加载程序关闭。

当在任何页面上仅发出http请求时，即当请求被截获时，加载器将在稍后获得响应时显示加载器，这样可以很好地解决该问题。

但是现在如果在1页上发出了2个请求，我会报出removeView 未找到的错误。

/loaderInterceptor.ts

@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();。

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

1 个答案: