угловой перехватчик завершается до ответа данных запроса Http

Вот как я реализую 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)", я показываю загрузку, только если условие верно. Но у нас должен быть возврат для метода перехвата, верно?
Поэтому я поместил "возврат" вне этого условия.
Этот возврат вызывает проблему, и поэтому загрузка исчезает.
Итак, как я могу исправить для такой сценарий?


angular angular-http-interceptors
person Steven Sann    schedule 12.03.2020    source источник
comment
Да. Вы только перехватываете исходящий запрос прямо сейчас. Логика скрытия загрузки должна происходить, когда возвращается ответ. Поскольку вы говорите, что для возврата данных требуется почти 10 секунд, это может быть задержка или что-то еще, но если это связано с тем, что в ответе возвращается большой набор данных, убедитесь, что вы сначала отображаете только небольшую его часть. Отображение такого большого количества данных дорого обходится с точки зрения производительности, поэтому ваш ответ может вернуться с данными, а значок загрузки может быть скрыт, но ваши данные все равно могут не отображаться. Вы можете использовать разбиение на страницы на стороне клиента, чтобы предотвратить это.   -  person Kyler Johnson    schedule 12.03.2020
comment
Можете ли вы воспроизвести эту проблему в stackblitz? Любые операторы в канале должны вызываться только после получения ответа. Моя пробная демонстрация: stackblitz.com/edit/angular-tk2bk1   -  person Kurt Hamilton    schedule 12.03.2020
comment
Есть ли у вас какие-либо другие запросы, которые вы делаете, пока ждете долговременного ответа?   -  person Kurt Hamilton    schedule 12.03.2020
comment
@KurtHamilton, всего одна просьба   -  person Steven Sann    schedule 12.03.2020
comment
Итак, вы можете воссоздать это в stackblitz? Вы установили ядерные уровни регистрации, чтобы попытаться понять, что происходит?   -  person Kurt Hamilton    schedule 12.03.2020
comment
@KurtHamilton, я обновил свой вопрос.   -  person Steven Sann    schedule 13.03.2020

Ответы (2)


arrow_upward
2
arrow_downward

Вам необходимо управлять определенными сценариями во время вызова 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
            }
        })
    }
person Mridul    schedule 12.03.2020
comment
Почему вы используете .do? Этого больше нет в RxJS - person Kurt Hamilton; 12.03.2020
comment
Я скопировал фрагмент из одного из моих проектов. Изменения могут быть сделаны в коде в соответствии с вашими требованиями. - person Mridul; 12.03.2020
comment
Мы еще не знаем, в чем проблема, поэтому было бы немного преждевременно с моей стороны публиковать ответ. - person Kurt Hamilton; 12.03.2020
comment
Опубликованный код OP должен работать, так что, вероятно, здесь происходит что-то еще. - person Kurt Hamilton; 12.03.2020
comment
Я столкнулся с той же проблемой ранее, поэтому я опубликовал в соответствии с этим. Это помогает, что еще вам нужно. - person Mridul; 12.03.2020

arrow_upward
1
arrow_downward

Да, вы можете сделать так, чтобы было два типа перехватчиков: один — 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 
                }
            }));
      }
}
person Yash Rami    schedule 12.03.2020