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