Numerous web worker asynchronous requests are being made, but not all are coming back

Question

Numerous web worker asynchronous requests are being made, but not all are coming back

Within my web worker script, I am utilizing the following code:

self.addEventListener('message', function(e){ 
        try {
      var xhr=new XMLHttpRequest()

      for(var i = 0; i < e.data.urls.length;i++){
        xhr.open('GET', e.data.urls[i], true);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.send(null);
        xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                  if (xhr.status == 200 || xhr.status == 304 || xhr.status ==0) {
                    postMessage(xhr.responseText);
                  } else {
                    postMessage(xhr.status + xhr.responseText);
                    throw  xhr.status + xhr.responseText;
                  }
                }
        };
      } 
    } catch (e) {
     postMessage("ERROR:"+e.message);       
   }
}, false);

The array e.data.urls contains 16 separate requests which are received and processed on the UI thread through the following code snippet:

var replies = 0;

worker.addEventListener('message', function(e){
    replies += 1;
});

However, only 10 of the requests seem to be completing. I wonder if this is due to the UI thread halting before all responses have been returned, or if there may be another element that I am overlooking?

javascript ajax web-worker

Answer 1

Answer №1

What's going on here is that the `xhr` variable is being overwritten in the loop. Because `XMLHttpRequest` is asynchronous by default, the code after `xhr.send();` doesn't wait for it to finish, causing the next loop iteration to start and operate on the previous `xhr` object. Depending on whether the previous request has completed or not, you may end up overwriting a live or finished `xhr` object, resulting in lost data.

To avoid this, make sure to use a new instance of XMLHttpRequest for each request instead of overwriting the same object.

I've moved the definition of the handler function outside the loop so it doesn't need to be redefined every time. The handler will be called in the context of the assigned XMLHttpRequest instance, making `this` point to the correct object.

Additionally, I've swapped the order of lines between `xhr.send()` and `xhr.onreadystatechange = ...`. It's important to assign the event handler before sending the request as there are events fired immediately after send. There's a rare chance that a request might return with ready state 4 before the event handler line is executed.

self.addEventListener('message', function(e){ 

    var xhrs = [];

    function handler() {
      if (this.readyState == 4) {
        if (this.status == 200 || this.status == 304 || this.status == 0) {
          postMessage(this.responseText);
        } else {
          postMessage(this.status + this.responseText);
          throw  this.status + this.responseText;
        }
      }
    };

    for(var i = 0; i < e.data.urls.length;i++) {
      xhrs[i] = new XMLHttpRequest();
      xhrs[i].open('GET', e.data.urls[i], true);
      xhrs[i].setRequestHeader('Accept', 'application/json');
      xhrs[i].onreadystatechange = handler;
      xhrs[i].send(null);
    } 

}, false);

Answer 2

What's going on here is that the `xhr` variable is being overwritten in the loop. Because `XMLHttpRequest` is asynchronous by default, the code after `xhr.send();` doesn't wait for it to finish, causing the next loop iteration to start and operate on the previous `xhr` object. Depending on whether the previous request has completed or not, you may end up overwriting a live or finished `xhr` object, resulting in lost data.

To avoid this, make sure to use a new instance of XMLHttpRequest for each request instead of overwriting the same object.

I've moved the definition of the handler function outside the loop so it doesn't need to be redefined every time. The handler will be called in the context of the assigned XMLHttpRequest instance, making `this` point to the correct object.

Additionally, I've swapped the order of lines between `xhr.send()` and `xhr.onreadystatechange = ...`. It's important to assign the event handler before sending the request as there are events fired immediately after send. There's a rare chance that a request might return with ready state 4 before the event handler line is executed.

self.addEventListener('message', function(e){ 

    var xhrs = [];

    function handler() {
      if (this.readyState == 4) {
        if (this.status == 200 || this.status == 304 || this.status == 0) {
          postMessage(this.responseText);
        } else {
          postMessage(this.status + this.responseText);
          throw  this.status + this.responseText;
        }
      }
    };

    for(var i = 0; i < e.data.urls.length;i++) {
      xhrs[i] = new XMLHttpRequest();
      xhrs[i].open('GET', e.data.urls[i], true);
      xhrs[i].setRequestHeader('Accept', 'application/json');
      xhrs[i].onreadystatechange = handler;
      xhrs[i].send(null);
    } 

}, false);

Answer 3

Answer №2

It seems that your example bears a resemblance to this firefox demonstration, with the exception of the loop within the worker making numerous ajax requests. I wonder what could be the cause of the failure in processing these requests. It's possible that the worker is reaching a limit on the number of concurrent ajax connections it can handle.

Have you considered relocating the url for loop to the main gui thread:

for(var i = 0; i < urls.length; i++){
    worker.postMessage(urls[i]);
}

Additionally, you may want to modify your worker to perform one ajax call at a time:

self.addEventListener('message', function(e){ 
    try {
        var xhr=new XMLHttpRequest()

        xhr.open('GET', e.data, true);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.send(null);
        xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                  if (xhr.status == 200 || xhr.status == 304 || xhr.status ==0) {
                    postMessage(xhr.responseText);
                  } else {
                    postMessage(xhr.status + xhr.responseText);
                    throw  xhr.status + xhr.responseText;
                  }
                }
        };
    } catch (e) {
      postMessage("ERROR:"+e.message);       
    }
}, false);

You could try implementing some error handlers from the mozilla example to troubleshoot the issue. For instance, adding the following code in the main GUI thread:

worker.onerror = function(error) {  
  dump("Worker error: " + error.message + "\n");  
  throw error;  
};

And inside the worker:

function errorReceiver(event) {  
   throw event.data;  
}

Answer 4

It seems that your example bears a resemblance to this firefox demonstration, with the exception of the loop within the worker making numerous ajax requests. I wonder what could be the cause of the failure in processing these requests. It's possible that the worker is reaching a limit on the number of concurrent ajax connections it can handle.

Have you considered relocating the url for loop to the main gui thread:

for(var i = 0; i < urls.length; i++){
    worker.postMessage(urls[i]);
}

Additionally, you may want to modify your worker to perform one ajax call at a time:

self.addEventListener('message', function(e){ 
    try {
        var xhr=new XMLHttpRequest()

        xhr.open('GET', e.data, true);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.send(null);
        xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                  if (xhr.status == 200 || xhr.status == 304 || xhr.status ==0) {
                    postMessage(xhr.responseText);
                  } else {
                    postMessage(xhr.status + xhr.responseText);
                    throw  xhr.status + xhr.responseText;
                  }
                }
        };
    } catch (e) {
      postMessage("ERROR:"+e.message);       
    }
}, false);

You could try implementing some error handlers from the mozilla example to troubleshoot the issue. For instance, adding the following code in the main GUI thread:

worker.onerror = function(error) {  
  dump("Worker error: " + error.message + "\n");  
  throw error;  
};

And inside the worker:

function errorReceiver(event) {  
   throw event.data;  
}

Numerous web worker asynchronous requests are being made, but not all are coming back

Answer №1

Answer №2

Similar questions

How to open a print preview in a new tab using Angular 4

Encountering issues when attempting to send a POST request using Rails, React, and jQuery

Is it possible to execute an ajax function at regular intervals until a specific condition is fulfilled?

Issue with onclick event not being triggered by Javascript function inside constructor

Using JQuery to Identify the Clicked Div Container

manipulating session variables with javascript ajax and php

Is there a way to set the content to be hidden by default in Jquery?

How to showcase a list from intricate JSON data using Angular

AJAX Finished Reply

Why must the sidebar be displayed horizontally on the smartphone screen?

Ajax returns with a successful response, yet the specified action is never executed

What could be the reason for the jQuery animate function not functioning properly?

A guide to entering information into an input field with JavaScript for logging in successfully

How can I retrieve the children of a component in React?

AngularJS is a highly intuitive platform that incorporates Google Maps for

Why does serializing a JavaScript Object to JSON result in "{}"?

The candy stripes on a loading bar zebra assist in creating a unique and

Tips for personalizing error messages for the "required" field by utilizing a dictionary feature on VeeValidate in Vue.Js

Displaying JSON data in an HTML table cell format

Is there a way to stop myself from accidentally clicking twice on the same tile?