I'm wondering if there's a way in a Javascript/Angular application to hook into a 'request-sent' event emitted by the browser immediately after it sends off a request. The purpose is that we want to ensure/control the order of the requests that go out, and we were thinking of sending each one out in response to the previous one emitting a 'request sent' event (this way we ensure the most important requests get out first). We want to allow the requests to run asynchronously/simultaneously so we don't have the option of waiting for one request to return before sending the next one. We want to send each request as soon as we know the previous one was successfully sent.
The challenge with this is that the order in which the requests are sent in the code does not match the order we see in the Chrome network tab, so we can't rely on the sequences of events that run in the code to guarantee that the same sequence will be followed when the browser sends the requests.
This is why it would be really convenient if we could hook into a 'request sent' event fired from the browser or something of that sort. That would ensure that all requests can still go out asynchronously while also controlling the order in which they go out.
Thanks for any forthcoming help.
If you want to maintain the order of api calls, you can user switchMap operator.
let's say that you have two api calls:
const apiCall1$ = this.http.get("/endpoint1");
const apiCall2$ = this.http.get("/endpoint2");
and you want to wait for apiCall1 to finish before sending apiCall2, you can do it like this:
apiCall1$.pipe(switchMap(() => apiCall2$)).subscribe({
next: (response) => {
//do something...
}
});