как сказать перехватчику не показывать счетчик - PullRequest
0 голосов
/ 07 июня 2019

У меня есть перехватчик загрузки, который показывает загрузку каждый раз, когда я делаю http-запрос, и он работает очень хорошо, спиннер загрузки работает в полноэкранном режиме, но я сделал компонент поиска, что это вход, и каждый раз, когда я пишу внутри ввода он делает http-запрос и получает все данные, но проблема в том, что загрузка отображается в полноэкранном режиме, и я хочу, чтобы загрузка имела другой обработчик в этом виде запроса, как я могу сказать своему перехватчику, что когда вызов сделан входом не показывает загрузку?

// это код моего перехватчика

@Injectable({
  providedIn: 'root'
})
export class LoadinInterceptorService implements HttpInterceptor {

  constructor(private spinner:NgxSpinnerService, private router: Router) { }

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

    this.router;

    this.spinner.show();
    return next.handle(req).pipe(
      finalize(() => this.spinner.hide())
    );
  }

}

Ответы [ 2 ]

0 голосов
/ 07 июня 2019

Вот как я поступил так же:

a) Добавить свойство 'hideSpinnerIcon' в заголовок запроса для этого конкретного запроса

@Injectable()
export class AuthHttpInterceptor implements HttpInterceptor {
    constructor(
        private activateRoute: ActivatedRoute,
        private loaderSvc: LoaderService
    ) {}

    // "Counter" keeps track to stop spinner for corresponding request only
    counter = 0;
    intercept(req: HttpRequest<any>, next: HttpHandler) {
       // Start Spinner only if it does not have 'hideSpinnerIcon' header
        if (!_.get(req.headers, 'hideSpinnerIcon')) {
            this.counter++;
            if (this.counter === 1) {
                this._loaderSvc.start();
            }
        }

        next.handle(req).pipe(
             tap((event: HttpEvent<any>) => updateSpinner(req); ),
             catchError((error: HttpErrorResponse) => {
                  updateSpinner(req,true);
                  return throwError(error);
             });
        );
    }

   // Reduce Counter here if got success response from api or Errored Out
   // don't alter when hideSpinnerIcon is set
    private updateSpinner(req,isErroredOut?) {       
        if (!_.get(req.headers, 'hideSpinnerIcon')) {
            this.counter--;
        }     
        if (isErroredOut || this.counter === 0) {
            this._loaderSvc.stop();
        }
    }
}

С кодом выше:

a) Вы можете настроить запуск / останов вращателя на соответствующий запрос.

b) Если какой-либо API-файл был допущен с ошибкой, мы можем остановить счетчик и показать соответствующее сообщение об ошибке вместо бесконечных вращений.

в) Для любого API, имеющего метаданные в заголовках как hideSpinnerIcon, не будет отображаться счетчик

ПРИМЕЧАНИЕ Напишите http-wrapper-service, чтобы включить эти действия для лучшей управляемости и сегрегации

0 голосов
/ 07 июня 2019

Насколько я знаю, HttpInterceptor не может точно сказать, откуда исходит запрос.

Учитывая, что, если ваш NgxSpinnerService является синглтоном, вы можете сделать его с состоянием и установить флаг до того, как input сделает свой HTTP-запрос.Этот флаг сказал бы NgxSpinnerService отображать счетчик по-другому.Вы также захотите снять этот флаг после завершения HTTP-запроса ввода.Вы можете обернуть эту логику в свой собственный HttpClient -подобный сервис.

Вы также можете установить что-то особенное в запросе (то есть: в заголовке, в строке запроса) и обнаружить это вместо этого.Обратите внимание, что если вы не измените запрос, этот флаг будет отправлен на сервер без причины.

Обратите внимание, что есть что-то, что следует иметь в виду при этом подходе и вашем текущем перехватчике:

ЕслиВы отправляете два HTTP-запроса, они оба установят флаг и вызовут ваш spinner.show.Затем, когда первый запрос завершится, он сбросит флаг и вызовет spinner.hide.Это означает, что, хотя второй запрос все еще находится в полете, ваш счетчик пропадет ...

Это можно исправить, если счетчик числа вызовов show() был вызван.Вы уменьшаете его при вызове hide(), и если этот счетчик теперь равен 0, только тогда вы фактически скрываете счетчик.Если значение не равно 0, другой запрос поступает в полет, поэтому не прячьте счетчик.

Пример можно посмотреть здесь: https://stackoverflow.com/a/51813213/78804

...