快捷導(dǎo)航

Angular通過(guò)?HTTP?Interceptor?實(shí)現(xiàn)?HTTP?請(qǐng)求超時(shí)監(jiān)控的例子

更新時(shí)間：2022年06月17日 16:04:33 作者：JerryWang_sap

這篇文章主要介紹了Angular?如何通過(guò)?HTTP?Interceptor?實(shí)現(xiàn)?HTTP?請(qǐng)求的超時(shí)監(jiān)控,本文通過(guò)例子給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

當(dāng)開(kāi)發(fā)人員在 Dynatrace 中查看這些請(qǐng)求時(shí)，將無(wú)法再看到超時(shí)后正在進(jìn)行的 API 調(diào)用。該過(guò)程在后臺(tái)進(jìn)行渲染，但 Dynatrace 看到返回給客戶端的響應(yīng)并停止記錄，在這種情況下，如果能了解它正在做的事情需要這么長(zhǎng)時(shí)間，對(duì)分析問(wèn)題會(huì)更有幫助。

我們可以引入一個(gè) Angular HTTP_INTERCEPTOR 來(lái)超時(shí)等待已久的網(wǎng)絡(luò)請(qǐng)求，從而確保在服務(wù)器端引導(dǎo)的應(yīng)用程序具有更短的生命周期。換句話說(shuō)：所以 SSR 渲染不會(huì)因?yàn)榈却齺?lái)自網(wǎng)絡(luò)的緩慢 API 響應(yīng)而 掛起。但是，這可能需要在應(yīng)用程序代碼甚至 SSR 代碼中添加額外的邏輯，以便在 SSR 響應(yīng)中不會(huì)返回此類格式錯(cuò)誤的渲染（基于不完整的數(shù)據(jù)）。在這種情況下，最好回退到?jīng)]有緩存標(biāo)頭的 CSR 應(yīng)用程序，而不是允許格式錯(cuò)誤的渲染 html 作為響應(yīng)發(fā)送（并且可能由 CDN 緩存）。

一個(gè)例子。

在 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 的實(shí)現(xiàn)：

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 操作符。如果在指定的時(shí)間間隔之內(nèi)沒(méi)有 emit 值，則會(huì)拋出 error.

看下面這個(gè)例子：

// 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));

在這段代碼里，我們首先使用 delay 操作符，在 makeRequest 函數(shù)里指定了一個(gè)時(shí)間間隔，來(lái)模擬函數(shù)調(diào)用的延遲。

然后將 makeRequest 返回的 Observable，添加了一個(gè) timeout(2500) 的操作符，意思是 2.5 秒之內(nèi)，如果該 Observable 沒(méi)有發(fā)出值，即進(jìn)入 CatchError 的處理邏輯內(nèi)。

數(shù)據(jù)源頭有三個(gè)值，4000，3000 和 2000，其中只有最后一個(gè)值小于 2500，因此能在超時(shí)時(shí)間間隔之內(nèi)完成函數(shù)調(diào)用。其他兩個(gè)值都會(huì)導(dǎo)致超時(shí)，從而進(jìn)入 catchError 的數(shù)據(jù)打印。

到此這篇關(guān)于Angular 如何通過(guò) HTTP Interceptor 實(shí)現(xiàn) HTTP 請(qǐng)求的超時(shí)監(jiān)控的文章就介紹到這了,更多相關(guān)Angular HTTP 請(qǐng)求超時(shí)監(jiān)控內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: