Question

因此，当应用程序与服务器交互时，我有一个加载图标显示。当请求消失时，将显示图标，当响应返回时，请删除图标。很简单。

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.spinnerService.addPendingLoad();

    //We need to add this header to all outbound requests to note this is an XHR request
    const authReq = req.clone({
      headers: req.headers.set("X-Requested-With", "XMLHttpRequest")
    });

    return next.handle(authReq).pipe(
      tap((event: HttpEvent<any>) => {
        if(event instanceof HttpResponse) {
          this.spinnerService.removePendingLoad();
        }
      }));
  }

export class SpinnerService {
  pendingLoads: number = 0;

  constructor(private spinnerService: NgxSpinnerService) {}

  addPendingLoad() {
    this.pendingLoads++;
    this.spinnerService.show();
  }

  removePendingLoad() {
    this.pendingLoads--;
    if(this.pendingLoads <= 0) {
      this.spinnerService.hide();
    }
  }
}

所以我要解决的问题是，大多数情况下请求将立即返回，因此最终发生的是您非常快速地显示/隐藏了该图标，这可能会带来不愉快的体验。 / p>

我尝试在this.spinnerService.hide();上设置500ms的超时时间，因此加载图标将始终在屏幕上显示最短的时间。这是一种更令人愉悦的体验，但最终会使加载图标的显示时间比实际显示的时间更长，这会使应用程序“感觉”迟钝。

我的目标是能够以某种方式确定请求待处理的时间，并且仅在请求花费异常长时间的情况下才显示加载图标。

例如，大多数请求将在100毫秒左右响应。如果发生了某些情况，但导致响应延迟，则触发该加载图标，仅在该100ms标记之后显示。因此，如果整个请求花费了300毫秒，则只会在100毫秒-> 300毫秒之间显示加载图标。如果请求时间少于100毫秒，则无需显示任何图标。

像这样可能吗？我确实知道边缘情况会像请求一样花费105毫秒来发生，因此我仍然会遇到那种令人不快的经历，但是IMO即使始终不需要在屏幕上始终显示加载图标，这也是一个折衷方案。

Answer 1

您可以在setTimeout回调中显示它，而不是立即显示微调器：

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

  let delayExpired = false;

  const timeout = setTimeout(() => {                   // Set spinner timeout
    delayExpired = true;
    this.spinnerService.addPendingLoad();              // Show spinner after delay
  }, 100);                                             // Wait 100 ms to show spinner

  ...

  return next.handle(authReq).pipe(
    tap((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        clearTimeout(timeout);                         // Cancel spinner timeout
        if (delayExpired) {
          this.spinnerService.removePendingLoad();     // Hide spinner
        }
      }
    }));
  }
}

有关演示，请参见this stackblitz。

角度7：如果请求时间过长，请采取措施

1 个答案: