Question

我想使用httpInterceptors在angular中实现全局预加载器概念，假设两个同时调用的两个http服务调用不能正常工作，则“ finalize”仅在一个或多个http api调用结束后才触发，但没有发生，预加载器也无法正确显示，它会在第一个api调用完成后隐藏。请提出我错过的事情，并告诉我如何处理。这是处理全局错误和预加载器概念的正确地方吗？

app.component.html

<preloader [loading]="appService.loading"></preloader>

app.component.ts：

const url1 = "https://jsonplaceholder.typicode.com/albums/1";
const url2 = "https://jsonplaceholder.typicode.com/albums/2";
forkJoin(
        this.http.get(url1),
        this.http.get(url2),
    ).subscribe(console.log);

HttpserviceInterceptor：

import {
    HttpEvent,
    HttpHandler,
    HttpInterceptor,
    HttpRequest,
} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { finalize, tap } from 'rxjs/operators';
import { AppCommonService } from './app.common.service';

@Injectable()
export class HttpserviceInterceptor implements HttpInterceptor {
    constructor(
        private appService: AppCommonService,
        private notification: NotificationsWrapperService,
    ) {}
    public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.appService.showPreLoader()
        return next.handle(request).pipe(
            //tslint:disable-next-line: no-empty
            tap(() => {
            }, (error: any) => {
                this.notification.error(error);
            }),
            finalize(() => this.appService.hidePreLoader()),
        );
    }
}

AppCommonService：

public showPreloader(): void {
    //this.showPreloader$.next(true);
    this.loading = true;
}

public hidePreLoader(): void {
    //this.showPreloader$.next(false);
    this.loading = false;
}

Answer 1

让我们假设您执行两个请求。第一个完成需要一秒钟，第二个需要5秒。根据您提供的代码，加载程序的流程如下。

已执行第一个请求并将this.loading设置为true
第二个请求已执行，this.loading再次设置为true
第一个请求完成，并且this.loading设置为false（错误）
第二个请求完成，并且this.loading设置为false

要在请求处于活动状态时显示加载程序，应尝试保持Web浏览器当前正在执行的请求数。假设您初始化了一个名为currentNumberOfRequests的私有整数，并将其值设置为0。

因此，在执行请求时，应始终将{this.loading}标志设置为true并将this.currentNumberOfRequests加1，并且当请求成功或失败时（最好在finally子句中），应该将this.currentNumberOfRequests减小1。现在，如果this.currentNumberOfRequests为0，则应该隐藏加载程序。

未使用httpInterceptors同时显示预加载器一个或多个http服务调用吗？

1 个答案: