angular перехватчик завершает работу, прежде чем данные запроса Http отвечают

Question

Вот так я реализую Interceptor, чтобы показать загрузку для всех запросов Http.

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

       if(myCondition == true)
    {
        // my loading start showing here
        return next.handle(req).pipe(
        finalize(() => { 
                        // I hide my loading here 
                       })           );
    }
     return next.handle(req).pipe(
     finalize(() => { }));
    }

, но мой запрос Http содержит много данных, а бэкэнд занимает почти 10 секунд.
Мне просто нужно скрыть загрузку только после завершения операции бэкэнда.
Но, используя приведенный выше код, загрузка скрывается до завершения бэкенда.
Нужно ли обрабатывать HttpRespond, как в этом примере ?

ОБНОВЛЕНИЕ:
Я нашел причину, я обновил свой код.
У меня условие "if (myCondition == true)", я только показывать загрузку, только если условие истинно. Но мы должны иметь возврат для метода перехвата, верно?
Так что я поставил «возврат» вне этого условия.
Этот возврат вызывает проблему, и поэтому загрузка исчезает.
Так как я могу исправить для такой сценарий?

Answer 1

Да, вы можете сделать, что есть два типа перехватчиков: один Request и другой Response, поэтому на каждом перехватчике Request мы начинаем загрузку, а на каждом перехватчике Response мы скрываем эту загрузку.

@Injectable()
export class AppHttpInterceptor implements HttpInterceptor {
    constructor() {}
intercept(
        req: HttpRequest<any>,
        next: HttpHandler
      ): Observable<HttpEvent<any>> {
        this.loadingService.show();
        return next.handle(req).pipe(
            tap(evt => {
                if (evt instanceof HttpResponse) {
                    if(evt != null) {
                          // here we are hide the loader flag
                          this.loadingService.hide();
                     }  
                }
            }),
            catchError((err: any) => {
                if(err instanceof HttpErrorResponse) {
                    try {
                         // if we are getting the erorr we also have to hide the loader 
                         this.loadingService.hide();                      
                    } catch(e) {
                       console.log(e)
                    }
                    //log error 
                }
            }));
      }
}

Answer 2

Вам нужно управлять определенным сценарием ios во время вызова API.

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

            this.loadingService.show(); //Initiate loader

        return next.handle(req).do((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
                this.loadingService.hide();
                //Closing loader when you receive reponse
            }
        }, (err: any) => {
            if (err instanceof HttpErrorResponse) {
                this.loadingService.hide();
               //Closing loader when you have Error
            }
        })
    }