Currently, I am tackling a project that involves displaying multiple sets of data to the user. Each set requires several requests to be made to the backend. Specifically, for the UserDetails dataset, I must query the getUser and getSigns endpoints. However, these endpoints are utilized for other purposes as well, so duplicating requests is not ideal. The data retrieval is triggered by a button click (for simplicity's sake), although in reality, it is more complex.
A restriction was put in place to limit the use of rxjs. This constraint implies that usage should be confined to 2/3 services and promises should be used whenever possible. Additionally, rxjs cannot be employed directly in the component.
I have provided a StackBlitz demo showcasing the issue at hand.
Despite making progress, I encountered a challenge where prior button click requests could not be canceled (due to the restriction on using rxjs within components). Consequently, if a user clicks while a request is still processing (duration unknown), the updates occur rapidly, causing confusion.
Assistance regarding this matter would be greatly appreciated.
An attempt was made to introduce a subject to the http-wrapper service and implement a switch map. Although ongoing requests were successfully canceled, subsequent click actions led to appended requests. For instance, one click resulted in one request, two clicks produced two requests instead of just one, and the pattern continued with each additional click. Efforts to utilize rxjs share and multicast did not yield desired results.
In conclusion, the goal is to efficiently handle multiple requests, prevent redundant calls, and share cached data among different services when necessary.