Within my Angular application, there exists a service responsible for retrieving data from a server.
load.service.ts:
load = new Observable(observer => {
console.log('load function called');
// asynchronous tasks with time delay
observer.complete();
});
The challenge arises when multiple components must all await the completion of the load observable. The approach I currently use is as follows:
this.loadService.load.subscribe(
change => {},
error => {},
() => {
// process data
}
);
However, when numerous components subscribe to this observable, the load function ends up being invoked multiple times, resulting in multiple server requests (as indicated by
console.log('load function called');The Question at Hand
While I am aware that there are Angular solutions available to address this issue, my primary inquiry remains:
How can I enable multiple subscriptions to a single observable without triggering the function repeatedly?
Clarification: My focus lies on mastering observables rather than data caching in this context.