Angular 5 / HttpInterceptor / Detect (отменено) xhr - PullRequest
Новая
       39

Angular 5 / HttpInterceptor / Detect (отменено) xhr

0 голосов
/ 04 мая 2018

В моем угловом приложении я вижу chrome (отменить) вызовы API, которые запускаются слишком быстро. У меня также есть HttpInterceptor, который запускает индикатор загрузки с каждым запросом HttpClient после 500 мс, если запрос не завершен. Тем не менее, в запросах, которые получают (отменены), похоже, нет нового события, которое впоследствии скрыло бы мой индикатор загрузки.

Есть ли способ обнаружить «отмененные» запросы в HttpInterceptor, чтобы я мог снова скрыть индикатор загрузки? 

export class GlobalHttpInterceptor implements HttpInterceptor {
constructor(
private sessionService: SessionService,
private loadingService: LoadingService
) { }

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

setTimeout(() => {
  if (showLoading) {
    this.loadingService.show();
  }
}, 500);
let showLoading = true;

if (this.sessionService.headers.length > 0) {
  for (const x of this.sessionService.headers) {
    req = req.clone({
      headers: req.headers.set(x.key, x.value)
    });
  }
}

return next.handle(req)
  .do(
    (response) => {
      if (response instanceof HttpResponse) {
        showLoading = false;
        this.loadingService.hide();
      }
    },
    (error) => {
      showLoading = false;
      this.loadingService.hide();
    });
}
}

Ответы [ 2 ]

0 голосов
/ 19 июля 2019

Не уверен, почему ответ, предоставленный @ Davy , еще не отмечен зеленой галочкой. Это рабочее решение, которое можно использовать без привязки к неудачной выборке.

Вот рабочая демонстрация, построенная с Angular 8 .

Попробуйте это с регулированием сети (скажем, «Медленный 3G») и обратите внимание на причудливый анимированный кружок, который отображается каждый раз, когда в очереди запросов приложения есть хотя бы один HTTP-запрос (подробнее см. В исходный код).

Если вы внимательно посмотрите на сетевые запросы, то увидите, что предыдущие ожидающие запросы XHR будут отменены при получении нового ввода от пользователя (обратите внимание, что GitHub API накладывает ограничение на количество запросов HTTP GET, поэтому используйте в противном случае вы получите код возврата HTTP 403). Подход, предложенный @Davy, работает нормально, если вы не сделаете что-то интересное и не нажмете Cmd + S (Ctrl + S на ПК), пока есть ожидающий запрос. В этом случае обработчик финализации не будет вызван, потому что весь процесс был прерван собственным модальным диалогом.

0 голосов
/ 31 мая 2018

Только что столкнулся с той же проблемой. Кажется, что оператор finalize срабатывает даже при отмене http-запроса. 

public intercept(
    request: HttpRequest<any>,
    next: HttpHandler
): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
    // request starts

    return next.handle(request).pipe(
        finalize(() => {
            // request completes, errors, or is cancelled
        })
    );
}
...