Ioni c 4 перехватчик загрузки не может отменить загрузку

Question

Я пытаюсь создать перехватчик Http для отображения загрузки на всех страницах. Но я не могу отклонить контроллер загрузки

Я следовал этому https://www.youtube.com/watch?v=IJWCpa_-MeU Но проблема загрузки отображается бесконечно.

На самом деле я немного новичок к этим понятиям. Поэтому, пожалуйста, помогите мне.

Большое спасибо

Я отредактировал свой код. Пожалуйста, найдите изображение значения console.log. Существует проблема, если вы делаете несколько запросов Http на одной странице. Он создает загрузчик, даже если старый существует.

 @Injectable()
export class HttpRequestInterceptor implements HttpInterceptor {
  constructor(
    private loadingCtrl: LoadingController,
    private toastCtrl: ToastController,
    private alertCtrl: AlertController,
  //  private fakeHttp: FakeHttpService
  ) {}

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    this.loadingCtrl.getTop().then(hasLoading => {
      if (!hasLoading) {

        console.log("loading")

        this.loadingCtrl.create({
          spinner: 'circular',
          translucent: true
        }).then(loading => loading.present());
      }
    });

    return next.handle(request).pipe(
      catchError(err => {
        if (err instanceof HttpErrorResponse) {
          switch ((<HttpErrorResponse>err).status) {
            case 401:
           //   return this.handle401Error(request, next);
           // handle 401 here
           console.log("401")
            default:
              return throwError(err);
          }
        } else {
          return throwError(err);
        }
      }),
      retryWhen(err => {
        let retries = 1;
        return err.pipe(
          delay(1000),
          tap(() => {
            // this.showRetryToast(retries);
          }),
          map(error => {
            if (retries++ === 3) {
              throw error; // Now retryWhen completes
            }
            return error;
          })
        );
      }),
      catchError(err => {
      //  this.presentFailedAlert(err.error['msg']);
        return EMPTY;
      }),
      finalize(() => {
        console.log("hii")
        this.loadingCtrl.getTop().then(hasLoading => {
          if (hasLoading) {
            this.loadingCtrl.dismiss();
          }
        });
      })
    );
  }

Вот простой Http-запрос, который я сделал, но данные отображаются в console.log, но загрузка не прекращается

ngOnInit() {

    this.cartService.getProductDetails().subscribe(data =>{

        this.products = data;
        this.filter_products = this.products;

        console.log(this.products)  

    })

Answer 1

У вас несколько ходов одновременно, это проблема состояния гонки. Для этого подхода я бы использовал сервис, который снимает показ и скрывает. Это проблема, если у вас есть несколько запросов одновременно или очень близко друг к другу ..

Служба загрузки

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { BehaviorSubject } from 'rxjs';
import { LoadingOptions } from '@ionic/core';
import { TranslateService } from '@ngx-translate/core';
import { debounceTime, distinctUntilChanged, filter, throttle } from 'rxjs/operators';
import { isNil } from 'lodash-es';

enum LoadingTypeEnum {
  show,
  hide,
  message
}

@Injectable({
  providedIn: 'root'
})
export class LoadingService {
  public loading$: BehaviorSubject<{ type: LoadingTypeEnum; data?: any }> = new BehaviorSubject<any>({ type: LoadingTypeEnum.hide });
  loadingState: { type: LoadingTypeEnum; data?: any } = null;
  public loading: HTMLIonLoadingElement = null;

  public async getLoader() {
    return await this.loadingController.getTop() || null
  };

  private async showLoading(opts: LoadingOptions) {
    if (!this.loading) {
      this.loading = await this.loadingController.create(opts);
      await this.loading.present();
    }
  }

  private async hideLoading() {
    if (this.loading) {
      await this.loading?.dismiss();
    }
    this.loading = null;
  }

  private async messageLoading(m: string) {
    if (this.loading) {
      this.loading.message = m
    }
  }

  constructor(private loadingController: LoadingController) {
    const l$ = this.loading$.pipe(distinctUntilChanged(), debounceTime(200));


    l$.pipe(filter(l => l.type === LoadingTypeEnum.show)).subscribe(l => this.showLoading(l.data));
    l$.pipe(filter(l => l.type === LoadingTypeEnum.hide)).subscribe(l => this.hideLoading());
    l$.pipe(filter(l => l.type === LoadingTypeEnum.message)).subscribe(l => this.messageLoading(l.data));
  }

  show(opts?: LoadingOptions) {
    if (isNil(opts)) opts = {
      message: 'Please Wait';
    };
    this.loading$.next({ type: LoadingTypeEnum.show, data: opts })
  }

  hide() {
    this.loading$.next({ type: LoadingTypeEnum.hide })
  }

  message(m: string) {
    this.loading$.next({ type: LoadingTypeEnum.message, data: m })
  }
}

Перехватчик

@Injectable()
export class HttpRequestInterceptor implements HttpInterceptor {

  constructor(private loading: LoadingService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.loading.show();

    return next.handle(request).pipe(
      catchError(err => {
        if (err instanceof HttpErrorResponse) {
          switch ((<HttpErrorResponse>err).status) {
            case 401:
              console.log("401")

            default:
              return throwError(err);
          }
        } else {
          return throwError(err);
        }
      }),
      retryWhen(err => {
        let retries = 1;
        return err.pipe(
          delay(1000),
          tap(() => {
            // this.showRetryToast(retries);
          }),
          map(error => {
            if (retries++ === 3) {
              throw error; // Now retryWhen completes
            }
            return error;
          })
        );
      }),
      catchError(err => EMPTY),
      finalize(() => this.loading.hide()))
  }
}