Angular 4 : Using HttpClient's interceptor to setup a spinner

Question

这里是我编写的拦截器，直接通过拦截器处理微调器

@Injectable()
export class ApiInterceptor implements HttpInterceptor {
    constructor(private _globalSpinnerService: GlobalSpinnerService) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const spinnerParam: string = req.params.get("spinner")
        let handleObs: Observable<HttpEvent<any>> = next.handle(req)
        if(spinnerParam) {
            this._globalSpinnerService.spinner = true
            handleObs.toPromise().then(() => {
                this._globalSpinnerService.spinner = false
            })
        }

        return handleObs
    }
}

它按预期工作。但是，我现在看到所有涉及微调器的请求都被发送了两次。所以我想我移除微调器的方法并不是最简洁的。一旦句柄结束，我如何告诉我的拦截器删除我的微调器？

编辑:

我通过将 handleObs.toPromise().then 替换为 handleObs.do() 来更改代码，现在可以正常工作了。我只是不确定为什么

Answer 1

发生这种情况是因为 handleObs observable 是冷的，toPromise 创建了一个订阅，然后 httpClient(...).subscribe 创建了另一个订阅。这导致了几个请求。是的，应该改用 handleObs.do()，它不会导致订阅，只会产生副作用。

通常希望微调器具有请求计数器，因为它应该正确处理并发请求:

function spinnerCallback() {
  if (globalSpinnerService.requestCount > 0) 
    globalSpinnerService.requestCount--;
}

if(spinnerParam) {
    globalSpinnerService.requestCount++;
    handleObs.do(spinnerCallback, spinnerCallback);
}

而globalSpinnerService.spinner实际上是一个getter:

get spinner() {
  this.requestCount > 0;
}