Angular通过 HTTP Interceptor 实现 HTTP 请求超时监控的例子_AngularJs

当开发人员在 dynatrace 中查看这些请求时，将无法再看到超时后正在进行的 api 调用。该过程在后台进行渲染，但 dynatrace 看到返回给客户端的响应并停止记录，在这种情况下，如果能了解它正在做的事情需要这么长时间，对分析问题会更有帮助。

我们可以引入一个 angular http_interceptor 来超时等待已久的网络请求，从而确保在服务器端引导的应用程序具有更短的生命周期。换句话说：所以 ssr 渲染不会因为等待来自网络的缓慢 api 响应而 挂起。但是，这可能需要在应用程序代码甚至 ssr 代码中添加额外的逻辑，以便在 ssr 响应中不会返回此类格式错误的渲染（基于不完整的数据）。在这种情况下，最好回退到没有缓存标头的 csr 应用程序，而不是允许格式错误的渲染 html 作为响应发送（并且可能由 cdn 缓存）。

一个例子。

在 app.module.ts 里的代码：

import { ngmodule } from '@angular/core';
import { browsermodule } from '@angular/platform-browser';
import { httpclientmodule, http_interceptors } from '@angular/common/http';
import { requesttimeouthttpinterceptor, default_timeout } from './interceptors';
import { appcomponent } from './app.component';

@ngmodule({
  imports: [
    browsermodule,
    httpclientmodule,
  ],
  declarations: [
    appcomponent,
  ],
  providers: [
    { provide: http_interceptors, useclass: requesttimeouthttpinterceptor, multi: true },
    { provide: default_timeout, usevalue: 5000 },
  ],
  bootstrap: [appcomponent]
})
export class appmodule { }

interceptor 的实现：

import { injectable, injectiontoken, inject } from '@angular/core';
import { httpinterceptor, httphandler, httprequest } from '@angular/common/http';
import { empty, timeouterror } from 'rxjs';
import { timeout, catcherror } from 'rxjs/operators';
export const default_timeout = new injectiontoken<number>('defaulttimeout');
@injectable({
  providedin: 'root'
})
export class requesttimeouthttpinterceptor implements httpinterceptor {
  constructor(
    @inject(default_timeout) protected defaulttimeout: number,
  ) { }
  intercept(req: httprequest<any>, next: httphandler) {
    const modified = req.clone({
      setheaders: { 'x-request-timeout': `${this.defaulttimeout}` }
    });
    return next.handle(modified).pipe(
      timeout(this.defaulttimeout),
      catcherror(err => {
        if (err instanceof timeouterror)
          console.error('timeout has occurred', req.url);
        return empty();
      })
    );
  }
}

这里使用了 rxjs 的 timeout 操作符。如果在指定的时间间隔之内没有 emit 值，则会抛出 error.

看下面这个例子：

// rxjs v6+
import { of } from 'rxjs';
import { concatmap, timeout, catcherror, delay } from 'rxjs/operators';
// simulate request
function makerequest(timetodelay) {
  return of('request complete!').pipe(delay(timetodelay));
}
of(4000, 3000, 2000)
  .pipe(
    concatmap(duration =>
      makerequest(duration).pipe(
        timeout(2500),
        catcherror(error => of(`request timed out after: ${duration}`))
      )
    )
  )
  /*
   *  "request timed out after: 4000"
   *  "request timed out after: 3000"
   *  "request complete!"
   */
  .subscribe(val => console.log(val));