如何使用 Observables Angular 4.x 监控 http 请求的持续时间

Question

如何在 timeoutWith (30s) 之前使用 Observables Angular 4.x 监控 http 请求的持续时间？

基本上，我想在 5 秒后触发 Application Insights 中的事件。

我的代码：

this.activatedRoute.queryParams
    .subscribe(params => {
        this.service.obterContextos(params.IdentificadoresExternos)
            .timeoutWith(environment.tempoLimiteCarregamento, Observable.defer(() =>
                Observable.throw(this.alertarTimeOut())))
            .subscribe(
                data => {

                });

        this.appInsightsService.trackEvent('Telemetria - Cartão de Crédito',
            telemetriaAI);
        parent.postMessage(response, '*');
    });

Answer 1

如果我理解您的问题，您希望 API 调用在 30 秒后超时并出现错误。如果 API 调用花费的时间超过 5 秒，您希望它继续并使用来自 API 的数据，但也将其作为事件进行跟踪。如果 API 调用在 5 秒内完成，请不要跟踪事件并照常使用来自 API 的数据。我实际上会使用两个单独的 observables 来做到这一点：一个用于 5 秒超时，另一个用于服务请求本身。

一个更简单的版本可以这样说明：

import { of } from 'rxjs/observable/of';
import { defer } from 'rxjs/observable/defer';
import { _throw } from 'rxjs/observable/throw';    
import { delay, timeoutWith, takeUntil } from 'rxjs/operators';

// The http request
const obs$ = of('Got the data');

const response$ = obs$.pipe(
  delay(simulateDelay), // simulate the time it takes to complete the http request

  // timeout error
  timeoutWith(30000, defer(() => _throw('took too long -- error'))),
);

// handle data or error when request completes or times out
response$.subscribe(
  data => console.log(data),
  err => console.log(err),
);

// track event that the request is taking long after 5 seconds,
// but only if request has not completed yet
obs$.pipe(
  delay(5000),
  takeUntil(response$),
).subscribe(() => console.log('taking kinda long!'));

使用你的代码，我想你会这样写：

const request$ = this.service.obterContextos(params.IdentificadoresExternos);
  .timeoutWith(environment.tempoLimiteCarregamento, Observable.defer(() =>
    Observable.throw(this.alertarTimeOut())))

request$.subscribe(data => { /* handle data */ });

timer(5000).pipe(takeUntil($request)).subscribe(() => {
    this.appInsightsService.trackEvent('Telemetria - Cartão de Crédito',
        telemetriaAI);
    parent.postMessage(response, '*');
});