As I aim to generate a list of observables while a user engages with the webpage, I am faced with the challenge of individually subscribing to each observable, but desiring another function to execute after individual or multiple simultaneous API calls are completed.
I have successfully implemented each function to add an observable to an array, and have utilized forkJoin and subscription to the array in my ngOnInit. However, this setup only executes once. How can I establish a real-time subscription that triggers a callback function after all ongoing API calls finish, and continues to do so as the user makes further API calls?
For instance, if the user clicks "Create Thing," then remains idle.
forkJoin(thingsInProgress).subscribe(() => doStuffWhenAllResolve())
...
createThing() {
const createThing$ = this.thingService.createThing().pipe(tap(() => doStuff()));
thingsInProgress.push(createThing$);
createThing$.subscribe();
}
deleteThing() {
...
}
updateThing() {
...
}
I anticipate doStuff() to execute first, followed by doStuffWhenAllResolve(). Alternatively, in a scenario where the user rapidly clicks "Create Thing," "Delete Thing," "Update Thing" almost simultaneously, doStuff() (as an example) should be invoked individually for each action, while doStuffWhenAllResolve() should be invoked collectively for all actions.
Furthermore, if the user swiftly creates an additional 10 things, doStuffWhenAllResolve() should be triggered once more upon completion of all concurrent API calls.
Which RXJS operator should I be searching for in this situation?