Assume the following case: You have an Angular/Ionic project that has multiple components that need the same resource. When the app loaded, the components will start getting the fresh data from the backend. Hence you will probably see multiple identical calls in the tab. Network I created a mock up project to simulate the issue. I created 3 components which are almost identical and placed them twice in the parent component. When they are initialized, they try to get books array from the back end. ... getBooks(){ .http.get( ); } ... return this 'getbooksUrl' The result is 6 identical api calls. One easy solution is to observables. Share is an operator that you can easily implement. share rxjs private _ongoingObservable; getBooks(){ ( ._ongoingObservable){ .log( ) ._ongoingObservable; } ._ongoingObservable = .http.get( ) .pipe( share(), finalize( { ._ongoingObservable = ; })); .log( ); ._ongoingObservable; } if this console 'shared obs' return this this this 'someurl' => () this null console 'first time' return this What we do here is quite simple. We created a variable to keep a reference to the ongoing request. In the method, we first check if it has a value, if it has return it. If not, that means there is not an active request. Make a request and it so that this can become a multicast observable. Also make sure to remove the reference once we get a response from the request. Hence, we clear the variable in operator. share finalize This will not cache the value, it will only prevent multiple identical requests. Here is the result: demo: https://stackblitz.com/edit/ms-ng-share-obs?embed=1&file=src/app/book.service.ts
![16 JavaScript Protips [2020 Edition]](https://hackernoon.imgix.net/drafts/q1n3yqk.png?auto=format&fit=max&w=3840)
