How to deal with the browser limit of concurrent domain requests in case of priority AJAX request?

Question

Imagine the following situation:

There are about 20 requests (or even more) that were triggered by our site. These can be any requests - we do not know how to start them again. On this website, all requests are targeted to the same URL. Requests can be subscribed to event listeners.

In the case of using Chrome, the first 6 requests are sent, and the rest are waiting in the queue to be sent (due to the restriction of the parallel request to the domain ).

At this point, the web page launches a very important request (lets call it "VIR"), which has a higher priority for sending to the server, and then 20 previous requests. Other requests (and their event listeners) are also important, so we cannot just interrupt them to send the VIR immediately.

We need a solution to receive all pending requests (6 sent + 14 in the queue), cancel them, then send the VIR, and then send it to other users with the same event listeners that they had before.

In the absence of another (out of the box) solution, two main questions:

• Can I get a link to all pending requests (including the queue)?
• Is it possible to abort xhr and then send it again (by cloning them somehow or I don't know)?

And one more related question:

• , , . , ? , ?:)

, . (, VIR ). websocket http/2 , .

! !

pm.: , javascript:)

Answer 1

XmlHttpRequest , open send, . xhr open/send URL- :

var pending_requests = [], 
    XHRBase = {
      open: XMLHttpRequest.prototype.open, 
      send: XMLHttpRequest.prototype.send
    };

XMLHttpRequest.prototype.open = function() {

  pending_requests.push(xhr._data = {xhr: this, open: arguments});
  XHRBase.open.apply(this, arguments);
  // add event listener to pop on finish
}

XMLHttpRequest.prototype.send = function() {
  xhr._data.send = arguments;
  XHRBase.send.apply(this, arguments);
}

function priority_call(params, callback) {
  pending_requests.forEach((req) => req.xhr.abort());
  // do vip xhr
  pending_requests.forEach((req) => {
    XHRBase.open.apply(req.xhr, req.open); 
    XHRBase.send.apply(req.xhr, req.send);
  })
}

Hide result