Javascript – Promise all is blocking other fetch call

Hopefully I understood the issue you’re having.

I find that asynchronous functions may still interfere with each other when running on the same document — especially when modifying elements. Although they’re running at the same time, each line of code still takes a certain amount of time to execute (especially console.log()). They may be running at the same time, but they’re also running on the same main thread more or less.

I ran into this issue when trying to implement loading symbols or progress bars. My loading symbols stuttered and my progress bars went from 0%-100% without any other steps.

The solution I found was Web Workers. Click here for a detailed guide for the Web Worker API.

Using a worker allows you to send logic to an entirely separate thread from the main thread — freeing up the UI to be modified and interacted with without being interrupted.

Here is some code modified from what I use to create and run a simple Worker with code from the same file:

// The function to send to a Worker.
// NOTE that the code in this function won't be able to access variables outside of it or the document directly. That will have to be handled in the message event of our Worker.
function code(amount) {
 var values = [];
 for(var i = 0; i < amount; i++) {
  values.push(Math.random());

  // Send our progress back to the main thread so we can show the user.
  postMessage([(i+1)/amount]);
 }

 // Send our final values.
 postMessage(values);
}

// Create a javaScript file as an Object URL.
var url = URL.createObjectURL(
 new Blob(
  // Place the code() function in the new JavaScript file.
  // Define the function for the Worker's onmessage event to start our function (doing this lets us send actual values and objects to the Worker and start it on demand).
  [`
   var code = ${code};
   onmessage = message => { postMessage(code(...message.data)); };
  `],
  {type: 'application/javascript'}
 )
);

// Create a worker with the script from our JavaScript file.
var customworker = new Worker(url);

// Add our Object URL to the customworker to access it later.
customworker.url = url;

// Add a function to revoke the Object URL when we terminate the worker.
customworker.resolve = function() {
 URL.revokeObjectURL(this.url);
 this.terminate();
};

var progress = document.querySelector('progress');

// Retrieve and process data whenever a message is posted using postMessage().
customworker.addEventListener('message', function(message) {
 if(message.data.length == 1) {
  // Show the user the progress of our function using the progress of the for loop in code().
  progress.value = message.data[0];
 } else {
  // Terminate the worker using our custom function since we know the worker is done.
  // If we want to use the code in the worker again and again, you don't need to do this.
  this.resolve();

  // Show the user what we want to show them of the result.
  document.querySelector('div').innerHTML = `1000000 random numbers were found. The final number was ${message.data.slice(-1)}.`;
 }
});

// Run the function in our Worker sending a parameter of 1000000 to code().
customworker.postMessage([1000000]);

<div>Running Worker...</div>
<progress max='1' value='0'/>

Here is a simplified version of the code above

function code() {
 // Your code here.
 // Use postMessage() to send data back to the document.
}
var url = URL.createObjectURL(new Blob([`var code = ${code}; onmessage = message => { postMessage(code(...message.data)); };`], {type: 'application/javascript'}));
var customworker = new Worker(url);
customworker.url = url;
customworker.resolve = function() { URL.revokeObjectURL(this.url); this.terminate(); };
customworker.addEventListener('message', function(message) {
 // Use message.data and manipulate the document here.
});
customworker.postMessage([/* Parameters go here. */]);

You could use a Worker in aggragateSearch() or fetchAPI() to offload the intense requirements of the fetch() function to a new thread, then you can update the div you hope to change in the Worker’s ‘message’ eventListener.

For instance, your fetchApi function might look something like this (untested):

function fetchApi(api, term) {
 fetchApi.worker.postMessage([api, term]);
}
fetchApi.worker = new Worker(
 URL.createObjectURL(
  new Blob(
   [`var code = ${
     (api, term) => fetch('aggregate.php', { method: 'POST', body: JSON.stringify({ source: api, term: term }) })
      .then(result => result.json())
      .then(result => postMessage(result.formattedResponse))
    }; onmessage = message => { postMessage(code(...message.data)); };`],
   {type: 'application/javascript'}
  )
 )
);
fetchApi.worker.addEventListener('message', function(message) {
 document.getElementById('myDiv' + api).innerHTML = message.data;
});

If you can put your code in a real .js file, that might be cleaner than making a URL Object when using Workers.

This solution may not meet your need if I misunderstood your issue, — and you would need to adapt it to your full code, — but hopefully this is useful to you!