Создайте общий загрузчик, перехватывая http-запрос (HttpInterceptors) - PullRequest
Новая
       17

Создайте общий загрузчик, перехватывая http-запрос (HttpInterceptors)

0 голосов
/ 13 февраля 2019

Я создаю общий загрузчик в ionic 3, но есть проблема из-за ручного использования loader.dismiss()

Вместо создания загрузчика с помощью loaderCtrl для очень http запроса в ionic I'mпланирую сделать только один загрузчик.Я использую httpInterceptor и когда запрос перехвачен, я создал и представляю загрузчик.И я проверяю, имеет ли событие тип HttpRequest, если да, загрузчик отклоняется.

Это прекрасно работает, когда на любой странице выполняется только запрос http, т.е. запрос сделан, он перехвачен загрузчиком.представляется позже, когда ответ получен, загрузчик отклоняется.

Но теперь, если на 1 странице сделано 2 запроса, я выдаю ошибку removeView not Found .

/ 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();
       }));

 }
}

Метод dismissing вызывается дважды, когда получено 2 ответа, и во 2-й раз нет загрузчика, который должен быть отклонен, поэтому мы получаемошибка.Пожалуйста, помогите.

1 Ответ

0 голосов
/ 13 февраля 2019

На мой взгляд, запрос успешно обработан до загрузки, поэтому я создал один сервис для его решения.Мой исходный код приведен ниже: 

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();.

...