Question

我有一个http拦截器，它可以在处理HTTP请求时打开和关闭加载叠加。它通过激活在app.component.ts中订阅的共享服务（实际上切换CSS）来实现此目的。

问题在于，随着请求的进出，一个请求的“覆盖关闭”操作可能会关闭加载屏幕，而另一个请求仍在进行中。我知道为什么会发生这种情况，但我真的想不出解决办法。

Answer 1

一种简单的方法是使用counter跟踪待处理的请求数。

执行请求时，您增加计数器，当类型为HttpResponse的响应到达时，则减少计数器。

当计数器达到0时，请移开多余的部分，否则应保持计数直到达到0的值为止。

Ps：您可以以链接拦截器的完整代码为例。

Answer 2

您可以使用数组保存“正在运行的作业”。您可以将服务可观察到的每个组件作为唯一的字符串“键”添加到服务中的数组。


.
.
.
runningObservables: string[] = []
.
.
.
private addObservable(name: string) {
    this.runningObservables.push(name);
  }

  private removeObservable(name: string) {
    const index = this.runningObservables.indexOf(name);
    if (index > -1) {
      this.runningObservables.splice(index, 1);
    }
  }

然后在您的组件中使用类似的东西。

<app-spinner [isShown]="runningObservables.length > 0"></app-spinner>

在您的替换/完成方法中添加和删除条目。

observable的简化版本。

this.addObservable('getChangeRequestTypes');
    this.changeRequestsService.getChangeRequestTypes()
      .subscribe(
        db => {
          this.removeObservable('getChangeRequestTypes');
          this.changeRequestTypes = db;
        },
        error => console.log(error),
        () => { });

HttpInterceptor加载屏幕

2 个答案: