JavaScript Web Worker 中怎么在后台线程中使用 Fetch 请求数据-js教程-PHP中文网

web worker 中可直接使用原生 fetch 发起网络请求，支持 async/await、完整配置项及响应处理；需显式设置 credentials: 'include' 才能携带 cookie，跨域时后端须配合 cors 头；禁用 xmlhttprequest。

javascript web worker 中怎么在后台线程中使用 fetch 请求数据

Web Worker 中可以直接使用 fetch，无需额外引入或 polyfill，这是它在后台线程发起网络请求的推荐方式。

Worker 线程里 fetch 是原生可用的

Worker 拥有独立的全局作用域（self），其中已内置 fetch 方法，行为和主线程完全一致：

支持 async/await 和 .then() 链式调用
可传入完整配置对象：如 method、headers、body、credentials 等
响应处理方法照常可用：response.json()、response.text()、response.arrayBuffer() 等
流式读取也有效：response.body.getReader() 可用于分块处理大响应

注意 credentials 和跨域 Cookie

fetch 在 Worker 中默认不发送 Cookie，即使同源也需显式声明：

Gradle 9.8.0

下载

要携带凭证（如 session cookie），必须设置 credentials: 'include'
若后端要求 CORS 支持，还需确保响应头包含 Access-Control-Allow-Credentials: true，且 Access-Control-Allow-Origin 不能为通配符 *
仅同源请求可省略 credentials；跨域时遗漏该选项会导致认证失败

典型用法示例

以下是在 worker.js 中发起 POST 请求并解析 JSON 的完整写法：

self.onmessage = async function(e) {
  const { url, data } = e.data;

  try {
    const res = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
      credentials: 'include' // 如需登录态，请务必加上
    });

    if (!res.ok) {
      throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    }

    const result = await res.json();
    self.postMessage({ type: 'success', data: result });
  } catch (err) {
    self.postMessage({ type: 'error', message: err.message });
  }
};