Как обрабатывать загрузчик / спиннер для нескольких одновременных вызовов службы asyn c, используя перехватчик 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
                    }
                })
            );
}