Angular/RxJS 6: How to prevent duplicate HTTP requests?

Question

Currently have a scenario where a method within a shared service is used by multiple components. This method makes an HTTP call to an endpoint that will always have the same

Answer 1

There are quite a few approaches already here to help you but I will give you an approach from another prespective.

There is a thing called BehaviorSubject in RxJS which works really well to achieve this. It basically returns the last value right after there is a new subscriber. So you can make the HTTP request when your application loads, and call next() of BehaviorSubject with that value, and from there whenever a subscriber is there, it will instantly return that fetched value instead of making new HTTP requests. You can also re-retrieve the value (when it is updated) by just calling next with the updated value.

More information on BehaviorSubject: https://stackoverflow.com/a/40231605/5433925