XHR progress event microtask queue

Question

I want to use XHR with promises. I created a XHR Promise as suggested on HTML5 rocks (1) and Mozilla's website (2).

It doesn't work as expected. If I have the following sequence to load and process a file:

sequence = xhrPromise('filename').
  .then(parseFile)
  .then(processFile)
  .then(allSet);

If I just run 1 sequence, it works as expected.

If I try to run N sequences with Promise.all() to download/process N files, it breaks.

All the downloads start in "parallel", then once the first XHR request has completed, it stops the download of other files, run the full sequence for this file then resume the download of remaining files. Then, once another file is completed, it blocks the downloads, run the sequence for this files, then resumes the downloads and so on.

It seems to be the expected behavior as XHR progress events are thrown the main tasks queue and that promises are using the micro task queue.

Does it make sense?

It seems that it works as expected if I use the "fetch" API instead of XHR but not being able to monitor the progress of a download is a deal breaker for me.

Is there a good way to work around this issue?

(1) http://www.html5rocks.com/en/tutorials/es6/promises/

(2) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Answer 1

it stops the download of other files

What do you mean by that? IO happens outside the main thread, downloads continue even if you execute javascript. Although if you do some heavy processing on the results you might want to look into webworkers to not block the main UI thread.