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>...等等
，因此每种情况下对数据的处理方式都不同，并且基于每个组件都对相同的API端点进行相同的调用.因此，问题是，该调用在多个组件实例中突然执行了多次，这导致应用程序性能或服务器请求过多.

示例解决方案:我在考虑Angular HTTP拦截器，以及如何使用此工具捕获每个请求并在解决前一个请求时执行该请求，因此它们将一个接一个地触发.到目前为止，我已经实现了拦截器，并且能够从Observable访问每个HTTP事件或请求，但是从这一点开始，我不知道如何或是否可以继续延迟"它们.(我仍在学习RxJ和Angular相关的东西)
我也不确定这是合法的解决方案还是其他实践-可能更好的解决方案是构建更优化的应用程序.还听说过诸如缓存HTTP请求之类的机制.如果不能在全局"级别上正确处理这些请求，我想我必须深入研究应用程序以重建其结构.有什么建议或提示如何处理这种事情?

预先感谢

Problem: Angular app I'm working with is pretty complicated in terms of construction. There is case with many instances of same component with different data input in same place (parent component), every component is different chart displayed in the app, something like:
<sample-component [data]='data1> </sample-component> <sample-component [data]='data2> </sample-component> <sample-component [data]='data3> </sample-component> ... so on
so this data is processed differently in every case and based on that every component is making same call to same API endpoint. So problem is the call is executed suddenly multiple times from multiple component instances which is killing the app performance or server with too many requests.

Example Solution: I was thinking about Angular HTTP Interceptor and how with this tool I can catch every request and make it execute when previous one is resolved, so they would fire one by one. So far I implemented the Interceptor and I was able to access every HTTP Event or Request from the Observable, but from this point I got no clue how or if it's possible to move on with "delaying" them. (I'm still learning RxJs and Angular related things)
I'm also not sure if this is legit solution or there is another practise - probably better solution will be to build more optimized app. Also heard about such mechanism like caching HTTP requests. If those requests can't be handled properly at a "global" level I would have to dive into app to rebuild its structure I guess. Any advices or tips how to deal with such thing?

Thanks in advance

推荐答案

我认为解决此问题的一种方法是使用外观服务.

I think one way to solve this is to use a facade service.

chartData$: Observable<any>;

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

parent.component.ts

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

现在我要说的是，这取决于您组织事物的方式，但是据我了解，每个 sample-component 都会单独进行http调用.

Now I'd say it depends on how you organize things, but as far as I understand, every sample-component will make an http call on its own.

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

constructor (private chartFacade: ChartFacade) { }

每次您执行 chartData $ |您的 sample 组件模板中的async http调用只能进行一次，并且应该从 ReplaySubject 的缓存中检索结果.

Every time you do chartData$ | async in your sample component's template, the http call should be made only once and the result should be retrieved from the ReplaySubject's cache.

当 refCount === true 时，如果没有活动的订阅(例如，每个 sample 组件均被销毁)，则使用 ReplaySubject 由 shareReplay 删除，这意味着当再次加载这些组件时，将发生http调用，其结果将由新的 ReplaySubject 存储.

When refCount === true, if there are no active subscriptions(e.g: every sample component got destroyed), the ReplaySubject used by shareReplay will be thrown away, meaning that when those components are loaded again, there will occur an http call, whose result will be stored by the new ReplaySubject.

这里是关于外墙的话题.

这篇关于Angular HTTP拦截器一个接一个地发出请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！