JavaScript Worker无响应问题排查：Worker未执行任何代码

代码中的核心错误 #

• Worker消息事件参数处理错误：myWorker.js里的message事件回调直接把参数当作url，但实际回调接收的是事件对象，必须从event.data里提取传递过来的URL。
• 同步XMLHttpRequest问题：使用同步请求（open方法第三个参数为false）会阻塞Worker线程，不仅效率低下，还可能触发浏览器限制，导致Worker无法正常执行。
• 未定义的url变量：main.js中worker.postMessage(url)的url未声明，会抛出ReferenceError，直接导致消息无法发送给Worker。
• 缺少错误监听机制：没有给Worker绑定error事件，无法捕获文件加载失败、语法错误等问题，难以排查故障。

修正后的代码 #

myWorker.js

self.addEventListener('message', function(e) {
    console.log('worker starts work');
    const url = e.data;
    const xmlHttp = new XMLHttpRequest();
    // 使用异步请求避免阻塞
    xmlHttp.open("GET", url, true);
    xmlHttp.onload = function() {
        if (xmlHttp.status >= 200 && xmlHttp.status < 300) {
            self.postMessage(xmlHttp.responseText);
        } else {
            self.postMessage('请求失败，状态码：' + xmlHttp.status);
        }
    };
    xmlHttp.onerror = function() {
        self.postMessage('网络请求出错');
    };
    xmlHttp.send();
});

main.js

function aFunction(){
    // 定义实际请求的URL
    const url = 'https://example.com/target-api';
    try {
        const worker = new Worker('myWorker.js');
        
        worker.addEventListener('message', function(e) {
            console.log('worker has done his work');
            console.log('返回结果：', e.data);
            // 后续处理逻辑
        });
        
        // 添加错误监听，方便排查问题
        worker.addEventListener('error', function(e) {
            console.error('Worker出错：', e.message, '行号：', e.lineno);
        });
        
        worker.postMessage(url);
    } catch (err) {
        console.error('创建Worker失败：', err.message);
    }
}

内容的提问来源于stack exchange，提问作者Mateusz Niedbal