Prioritize certain XHR requests over others using Axios

Question

I am making a page that uses Axios to make a few dozen AJAX requests that are a bit slow, but that's okay, as I am using Vue.js to just show the data as in comes in. The rest of the page is nice and responsive while this is happening over the course of 30-60 seconds.

Now, when the user takes some other action that also generates a PUT or POST request, typically the request won't run till it gets to "its turn" as dictated by the browser, which seems to be making the outgoing XHR requests first-come-first-served. This new action thus is greatly delayed because of the ongoing data fetch requests.

Is there a way through Axios or any other approach to simply make these dozen data fetch requests as "low priority", so that any new other request could immediately get the next available outgoing HTTP connection?

I imagine I could write up some functions that would handle the queueing and then spoon-feed the requests to Axios, but it strikes me there should be a simpler way. Any thoughts?

Answer 1

I had to implement a custom scheme where my Javascript code spoon-feeds the browser (via axios) my AJAX requests using an array, like const requestQueue = [] and an array of in-progress promises, const pendingRequestPromises = []. There could be a few different ways to do this; one way was to update each array both before invoking and in the callbacks for each request; then when pendingRequestPromises.length is equal to or larger than a threshold (say 3), invoke the next request with an await rather than with a fire-and-forget approach. That way, the requests are made in bursts of 4 and other code can run between the bursts.

This seems like a job for a library out there...maybe I should write it? Let me know if you could use such a thing.