簡體   English   中英

Angular HTTP 攔截器一個接一個地發出請求

[英]Angular HTTP Interceptor make requests one after another


問題:我正在使用的 Angular 應用程序在構造方面非常復雜。 在同一位置(父組件)有許多相同組件的實例具有不同的數據輸入,每個組件在應用程序中顯示的圖表不同,例如:
<sample-component [data]='data1> </sample-component> <sample-component [data]='data2> </sample-component> <sample-component [data]='data3> </sample-component>... so on
因此,在每種情況下,此數據的處理方式都不同,並且基於每個組件都對相同的 API 端點進行相同的調用。 所以問題是從多個組件實例突然多次執行調用,這會導致應用程序性能或服務器的請求過多。

示例解決方案:我在考慮 Angular HTTP 攔截器以及如何使用此工具捕獲每個請求並在前一個請求解決時使其執行,因此他們會一個接一個地觸發。 到目前為止,我實現了攔截器,並且能夠訪問來自 Observable 的每個 HTTP 事件或請求,但是從這一點來看,我不知道如何或是否可以繼續“延遲”它們。 (我還在學習RxJs和Angular相關的東西)
我也不確定這是否是合法的解決方案或有其他做法 - 可能更好的解決方案是構建更優化的應用程序。 還聽說過緩存 HTTP 請求等機制。 如果無法在“全局”級別正確處理這些請求,我猜我將不得不深入應用程序以重建其結構。 任何建議或提示如何處理此類事情?

提前致謝

您可以使用shareReplay 之類的運算符來緩存您的 http 調用以返回將始終是最后發出的值,並使遲到的訂閱者無需再次執行調用即可訪問它:

...
.pipe(
  shareReplay({ bufferSize: 1, refCount: true })
 )

我認為解決這個問題的一種方法是使用外觀服務。

chart.facade.ts

chartData$: Observable<any>;

loadChartData () {
 this.chartData$ = this.http.get(...).pipe(shareReplay({ bufferSize: 1, refCount: true }));
}

父組件.ts

ngOnInit () {
 this.charFacade.loadChartData();
}

現在我想說這取決於您如何組織事物,但據我了解,每個sample-component都會自行調用 http 。

樣本.component.ts

// chartFacade.chartData$ - instantiated in `parent` component
this.chartData$ = this.chartFacade.chartData$;

constructor (private chartFacade: ChartFacade) { }

每次執行chartData$ | async sample組件的模板中使用chartData$ | async ,http 調用應該只進行一次,結果應該從ReplaySubject的緩存中檢索。

refCount === true時,如果沒有活動訂閱(例如:每個sample組件都被銷毀), ReplaySubject使用的shareReplay將被丟棄,這意味着當這些組件再次加載時,將發生 http 調用,其結果將由新的ReplaySubject存儲。

這是關於 Facades 的演講。

您可以創建一個 dataService 來包裝您的 http 調用並在那里處理緩存。 結合BehaviorSubjecthttpClient

_cache=new BehaviorSubject(null)
getData(){
   if(!this._cache.value){ 
       http.get(url).subscribe(this._cache)
   return this._cache.pipe(filter(data=>data),first())
}
invalidateCache(){ this._cache.next(null);)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM