WorkerGlobalScope.fetch() — Methode · JavaScript-Referenz

Signatur

WorkerGlobalScope.fetch(resource, options)

Beschreibung

fetch() ist im globalen Gültigkeitsbereich jedes Workers verfügbar – also in DedicatedWorkerGlobalScope, SharedWorkerGlobalScope und ServiceWorkerGlobalScope. Es verhält sich wie Window.fetch(): Man übergibt eine URL oder ein Request-Objekt und erhält ein Promise, das mit einem Response-Objekt erfüllt wird, sobald die Antwort-Header eingetroffen sind.

Im Worker lohnt sich fetch() vor allem dann, wenn Daten geladen und aufwendig verarbeitet werden sollen (z. B. große JSON-Dateien parsen, Binärdaten dekodieren, CSV umwandeln), ohne den Haupt-Thread zu blockieren. In Service Workern ist fetch() das zentrale Werkzeug, um abgefangene Anfragen im fetch-Event ans Netzwerk weiterzureichen und Caching-Strategien umzusetzen.

Wichtig: Das Promise wird nur bei Netzwerkfehlern (DNS-Fehler, CORS-Verletzung, Abbruch) verworfen. HTTP-Fehlerstatus wie 404 oder 500 führen zu einem erfüllten Promise – man muss daher selbst response.ok oder response.status prüfen. Relative URLs werden relativ zur URL des Worker-Skripts aufgelöst, nicht zur URL der Seite.

Parameter

Name	Typ	Default	Beschreibung
$resource Pflicht	string \| URL \| Request		Die abzurufende Ressource: eine URL (als String oder `URL`-Objekt) oder ein `Request`-Objekt. Relative URLs beziehen sich auf die Skript-URL des Workers.
$options	RequestInit	{}	Optionale Einstellungen, u. a. `method`, `headers`, `body`, `mode` (`cors`, `no-cors`, `same-origin`), `credentials` (`omit`, `same-origin`, `include`), `cache`, `redirect`, `referrer`, `referrerPolicy`, `integrity`, `keepalive`, `signal` (ein `AbortSignal`) und `priority`.

Rückgabewert

Typ

Promise<Response>

Beschreibung

Ein Promise, das mit einem Response-Objekt erfüllt wird, sobald die Header empfangen wurden. Bei Netzwerkfehlern oder Abbruch wird es mit einem TypeError bzw. AbortError (DOMException) verworfen.

Beispiele

JSON im Dedicated Worker laden und verarbeiten

// worker.js
self.addEventListener('message', async (event) => {
  const { url } = event.data;
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP-Fehler: ${response.status}`);
    }
    const produkte = await response.json();
    // Aufwendige Berechnung abseits des Haupt-Threads
    const summe = produkte.reduce((acc, p) => acc + p.preis, 0);
    self.postMessage({ anzahl: produkte.length, summe });
  } catch (err) {
    self.postMessage({ fehler: err.message });
  }
});

// main.js
const worker = new Worker('worker.js');
worker.onmessage = (e) => console.log(e.data);
worker.postMessage({ url: '/api/produkte.json' });

{ anzahl: 120, summe: 4589.5 }

Service Worker: Network-First mit Cache-Fallback

// sw.js
const CACHE = 'app-v1';

self.addEventListener('fetch', (event) => {
  if (event.request.method !== 'GET') return;

  event.respondWith((async () => {
    try {
      const response = await fetch(event.request);
      const cache = await caches.open(CACHE);
      // Response kann nur einmal gelesen werden -> klonen
      cache.put(event.request, response.clone());
      return response;
    } catch {
      const cached = await caches.match(event.request);
      return cached ?? new Response('Offline', { status: 503 });
    }
  })());
});

POST-Anfrage mit Timeout per AbortSignal

// worker.js
const sendeMesswerte = async (werte) => {
  const response = await fetch('/api/messwerte', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(werte),
    signal: AbortSignal.timeout(5000) // nach 5 s abbrechen
  });
  if (!response.ok) throw new Error(`Status ${response.status}`);
  return response.json();
};

sendeMesswerte([12.4, 13.1, 11.8])
  .then((ergebnis) => self.postMessage(ergebnis))
  .catch((err) => {
    if (err.name === 'TimeoutError') {
      self.postMessage({ fehler: 'Zeitüberschreitung' });
    } else {
      self.postMessage({ fehler: err.message });
    }
  });

{ gespeichert: 3 }

// Wichtig · Fallstricke

HTTP-Fehler verwerfen das Promise nicht: Bei 404/500 wird das Promise trotzdem erfüllt. Immer response.ok prüfen.
Relative URLs werden gegen die URL des Worker-Skripts aufgelöst (self.location), nicht gegen die Seite, die den Worker gestartet hat.
Response-Body nur einmal lesbar: Wenn die Antwort sowohl gecacht als auch zurückgegeben werden soll, response.clone() verwenden.
CORS und Cookies: Für Anfragen an andere Origins gelten die normalen CORS-Regeln. Cookies werden standardmäßig nur bei gleicher Herkunft gesendet (credentials: 'same-origin'). Die Content Security Policy (connect-src) des Worker-Skripts gilt auch hier.
Service Worker: Ein fetch() im Service Worker löst kein erneutes fetch-Event aus – es gibt also keine Endlosschleife. Anfragen mit mode: 'no-cors' liefern undurchsichtige Antworten (type: 'opaque', Status 0), deren Inhalt nicht lesbar ist.
Kompatibilität: In allen modernen Browsern in Workern verfügbar; AbortSignal.timeout() ist neuer (ca. 2022) und fehlt in älteren Versionen. In Node.js gibt es fetch() global ab Version 18, auch in worker_threads.

Siehe auch

Window.fetch() Request Response Headers WorkerGlobalScope.atob()