以角度5获取待处理的http请求的总数

Yas*_*iya 7 httpclient typescript angular5

嗯,我对角度5非常新,我在寻找一些问题时遇到了一些麻烦.那么我可以在angularJs $http.pendingRequests中得到angular5中的待处理请求总数吗?

小智 3

请注意,下面的代码是为 Angular 8 编写的。自 Angular 5 以来可能有一些语法变化,但总体思路保持不变

首先创建一个http拦截器。您可能希望创建另一个服务,其中BehaviorSubject 保存请求计数,以便能够在任何地方注入该服务并订阅计数器值。如果您有应用程序状态(即当您使用 ngrx 时),只需存储计数器值即可。在任何地方注入拦截器将是一种非常糟糕的做法。

import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';

export class RequestCountHttpInterceptor implements HttpInterceptor {
  pendingRequestsCount = 0;

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler,
  ): Observable<HttpEvent<any>> {
    this.pendingRequestsCount++;
    return next
      .handle(request)
      .pipe(finalize(() => this.pendingRequestsCount--));
  }
}
Run Code Online (Sandbox Code Playgroud)

接下来,您必须将其放入 AppModule 中的提供程序中(以确保整个应用程序中只有此拦截器的一个实例)

import { HTTP_INTERCEPTORS } from '@angular/common/http';
...

@NgModule({
 ...
  providers: [
    ...
    {
      provide: HTTP_INTERCEPTORS,
      useClass: RequestCountHttpInterceptor,
      multi: true,
    },
  ],
  ...
})
export class AppModule {}
Run Code Online (Sandbox Code Playgroud)

就是这样。请求计数现在将位于 HttpRequestCountInterceptor 的实例中(如上所述,将其移动到另一个服务或商店)。