Web Worker 中可直接使用 fetch 发起网络请求，现代浏览器原生支持，调用方式与主线程一致，但需注意无 DOM API、CORS 限制、cookie 默认不发送及 AbortController 兼容性等问题。
在 Web Worker 中可以直接使用 fetch 发起网络请求，无需额外配置或封装 —— 这是现代浏览器（Chrome 71+、Firefox 68+、Safari 16.4+、Edge 79+）原生支持的能力。
Web Worker 中 fetch 的基本用法
Worker 环境拥有独立的全局作用域（self），但已内置 fetch API，调用方式与主线程完全一致：
// worker.js
self.onmessage = function(e) {
const url = e.data.url;
fetch(url)
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data => {
self.postMessage({ type: 'success', data });
})
.catch(err => {
self.postMessage({ type: 'error', error: err.message });
});
};
需要注意的关键点
-
不支持
window或document：Worker 中没有 DOM API，所有操作必须通过self或直接调用（如fetch、setTimeout） -
CORS 限制依然生效：fetch 请求仍受同源策略和 CORS 头约束，后端需正确返回
Access-Control-Allow-Origin -
无法使用 cookie（默认）：除非显式设置
credentials: 'include'，且服务端允许凭证跨域 -
不支持
AbortController（部分旧版 Worker）：较新浏览器（Chrome 80+、Firefox 72+）已支持，但若需兼容可改用timeout封装或忽略中断逻辑
带错误处理和超时控制的增强示例
以下是一个更健壮的 fetch 封装，适用于生产环境：
// 在 worker.js 内
function fetchWithTimeout(resource, options = {}) {
const { timeout = 10000 } = options;
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
return fetch(resource, {
...options,
signal: controller.signal
}).finally(() => clearTimeout(id));
}
self.onmessage = async function(e) {
try {
const res = await fetchWithTimeout(e.data.url, {
method: 'GET',
headers: { 'Content-Type': 'application/json' }
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
self.postMessage({ ok: true, data });
} catch (err) {
self.postMessage({ ok: false, error: err.message });
}
};
主线程中启动 Worker 并通信
确保 Worker 文件路径正确，且服务器能正常提供该 JS 文件（不能是 file:// 协议）：
// main.js
const worker = new Worker('./worker.js');
worker.onmessage = function(e) {
if (e.data.ok) {
console.log('获取成功:', e.data.data);
} else {
console.error('获取失败:', e.data.error);
}
};
worker.postMessage({ url: 'https://api.example.com/data' });
不复杂但容易忽略：务必检查浏览器兼容性，避免在不支持 fetch 的老版本 Worker 环境中运行；开发时可用 console.log(self.fetch) 快速验证是否可用。
