あなたはHttp
クラスを拡張して、この機能を実装することができます。
まずあなたが進行中の要求を監視するために、このクラスから使用できる監視サービスを作成します。
export class MonitoringService {
private outstandingRequestsNumber: int = 0;
private outstandingRequestsNumberObserver: Observer;
private outstandingRequestsNumberObservable: Observable;
constructor() {
this.outstandingRequestsNumberObservable = Observable.create((observer:Observer) => {
this.outstandingRequestsNumberObserver = observer;
}).share();
}
getOutstandingRequests() {
return this.outstandingRequestsNumber;
}
incrementOutstandingRequests() {
this.outstandingRequestsNumber++;
}
decrementOutstandingRequests() {
this.outstandingRequestsNumber--;
if (this.outstandingRequestsNumber === 0) {
this.outstandingRequestsNumberObserver.next();
}
}
notifyWhenNoOutstandingRequests(callback) {
this.outstandingRequestsNumberObservable.subscribe(callback);
}
}
は今CustomHttp
クラスの実装:
@Injectable()
export class CustomHttp extends Http {
constructor(backend: ConnectionBackend,
defaultOptions: RequestOptions,
private monitoring:MonitoringService) {
super(backend, defaultOptions);
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
console.log('request...');
this.monitoring.incrementOutstandingRequests();
return super.request(url, options).finally(() => {
console.log('finally');
this.monitoring.decrementOutstandingRequests();
});
}
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
console.log('get...');
this.monitoring.incrementOutstandingRequests();
return super.get(url, options).finally(() => {
console.log('finally');
this.monitoring.decrementOutstandingRequests();
});
}
(...)
}
最後のステップは、で構成されていアプリケーションのブートストラップ時に両方のクラスを登録する:
bootstrap(AppComponent, [HTTP_PROVIDERS,
MonitoringService,
provide(Http, {
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, monitory:MonitoringService) => new CustomHttp(backend, defaultOptions, monitory),
deps: [XHRBackend, RequestOptions, MonitoringService]
})
]);
これを参照してくださいplunkr:https://plnkr.co/edit/lXn5vKY1K2A8RvSsJWm3?p=preview。
詳細については、この質問を参照してください:
を