Hook Web Worker 中的 fetch 函数
要在 Web Worker 中 hook fetch 函数，你可以通过以下几种方法实现：
方法1：直接覆盖 Worker 中的 fetch
// worker.jsconst originalFetch = self.fetch;self.fetch = async function(...args) {console.log('Intercepted fetch call:', args);// 在这里可以修改请求参数或添加额外逻辑try {const response = await originalFetch.apply(this, args);// 在这里可以修改响应数据console.log('Fetch response:', response);return response;} catch (error) {console.error('Fetch error:', error);throw error;}};// 正常使用 fetchself.onmessage = async (e) => {const result = await fetch(e.data.url);const data = await result.json();postMessage(data);};
方法2：使用 Service Worker 拦截所有网络请求
如果你需要跨多个 Workers/页面拦截请求，Service Worker 是更好的选择：
// service-worker.jsself.addEventListener('fetch', (event) => {console.log('Intercepted fetch:', event.request.url);// 可以修改请求或返回自定义响应event.respondWith(fetch(event.request).then(response => {// 处理响应return response;}).catch(error => {console.error('Fetch failed:', error);return new Response(JSON.stringify({error: 'Request failed'}), {status: 500,headers: {'Content-Type': 'application/json'}});}));});
方法3：在创建 Worker 前注入代码
// main.jsconst workerCode = `${hookFetch.toString()}function hookFetch() {const originalFetch = self.fetch;self.fetch = async (...args) => {console.log('Hooked fetch in worker');return originalFetch(...args);};}hookFetch();// Original worker code here...`;const blob = new Blob([workerCode], {type: 'application/javascript'});const workerUrl = URL.createObjectURL(blob);const worker = new Worker(workerUrl);function hookFetch() { /* ... */ }
Hook Fetch的常见用途
- 日志记录 - 记录所有发起的请求和响应
- 修改请求 - 添加认证头或其他参数
- 模拟响应 - 用于测试目的返回模拟数据
- 缓存控制 - 实现自定义缓存策略
注意：在Worker中hook全局函数可能会影响依赖原始fetch行为的其他代码，请谨慎使用。
内容由零声教学AI助手提供，问题来源于学员提问
