如何使用Angular HTTP拦截器处理多个同时服务调用的加载程序/旋转程序

Question

我已经实现了Http Interceptor，并在启动服务时显示了微调器，并在服务成功/失败时隐藏了微调器。

代码示例：

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

             return next.handle(req).pipe(
                tap((event: HttpEvent<any>) => {
                    if (event instanceof HttpResponse && event.body.errCode != undefined) {
                        // show_spinner

                    }
                }),
                finalize(()=>{
                    // hide_spinner
             })
         }

例如，有两个服务调用都同时发生；因此将显示两个呼叫对应的微调器，但第一项服务在2秒中完成，第二项服务在5秒中完成；现在，微调器将在第一个呼叫完成后被隐藏，将无法确认第二个服务呼叫。

Answer 1

我想回答我自己的问题，因此可以参考上述问题/问题的解决方案。

首先，声明一个全局变量（将其初始化为0），用作活动服务调用的计数器。

第二，对于每个服务截获的增量计数（计数器变量），当服务调用完成时，递减计数（计数器变量）。

最后，如果服务计数等于零，则隐藏微调框，否则显示微调框。

示例：通常定义一个拦截器服务来拦截HTTP请求。在拦截器服务中：

service_count = 0; // counter globally initialized.

constructor(
    private _route:Router
) {}

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

  this.service_count++; // increment count for each intercepted http request.
  // show spinner.

    return next.handle(req).pipe(
                finalize(() => {
                    this.service_count--;
                 // decreament when service is completed (success/failed both 
                    handled when finalize rxjs operator used)

                    if (this.service_count === 0) {
                        // hide spinner
                    }
                })
            );
}