Abort ajax call from web worker

Question

I read some articles about Web Workers today and I tried something concerning ajax requests. In fact, I wanted to be able to store every ajax request my web worker has sent in order to abort them when you're clicking an element. However, the XHR object can't be cloned, so it can't be send via postMessage() worker method.

I tried to do it this way :

    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
    let DONE = 4; // readyState 4 means the request is done.
    let OK = 200; // status 200 is a successful return.
    if (xhr.readyState === DONE) {
        if (xhr.status === OK) {
            handlePoints(JSON.parse(xhr.responseText));
        }
    }

    xhr.open('GET', '/api/widgets/burndownchart?widgetId='+ widgetId);
    xhr.send(null);
    self.postMessage([constants.EVENT_AJAX_CALL, xhr]);

But of course I've this error :

Uncaught DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': XMLHttpRequest object could not be cloned.

Do you have an idea about how doing this ? PS : sorry for my language's errors.

Quentin Quentin · Accepted Answer · 2018-07-16T15:36:22

You would need to keep the object inside the Web Worker and send a message to the Web Worker asking it to abort the request on demand.

Abort ajax call from web worker

1 Answers