Signatur
interface RequestInit
Beschreibung
RequestInit ist keine Klasse, die man instanziiert. Es ist ein Dictionary, also ein ganz normales JavaScript-Objekt, das man als zweites Argument an fetch(resource, options) oder an den Konstruktor new Request(input, options) übergibt. Darin legt man fest, wie der Request aussieht: HTTP-Methode, Header, Body, CORS-Modus, Umgang mit Cookies, Cache-Verhalten, Weiterleitungen, Referrer-Richtlinie und Abbruch über ein AbortSignal.
Alle Eigenschaften sind optional. Ohne Optionen sendet fetch() einen GET-Request mit mode: "cors", credentials: "same-origin" und redirect: "follow". Übergibt man ein bestehendes Request-Objekt zusammen mit einem RequestInit, dann überschreiben die Werte aus dem Options-Objekt die Werte des Requests.
In der Praxis braucht man RequestInit für fast alles, was über ein einfaches GET hinausgeht: JSON an eine REST-API schicken, Formulare mit FormData hochladen, Authentifizierungs-Header setzen, Cookies bei Cross-Origin-Anfragen mitsenden, Requests mit AbortSignal.timeout() nach einer Zeit abbrechen oder mit keepalive Analytics-Daten beim Verlassen der Seite verschicken.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $method | string | "GET" | HTTP-Methode, z. B. "POST", "PUT", "PATCH", "DELETE". Bei Standardmethoden wird die Schreibweise normalisiert. Für PATCH sollte man trotzdem Großbuchstaben verwenden. |
| $headers | Headers | Record<string, string> | Array<[string, string]> | Request-Header als Headers-Objekt, einfaches Objekt oder Array aus Schlüssel-Wert-Paaren. Verbotene Header wie Host oder Cookie werden im Browser ignoriert. |
|
| $body | string | Blob | ArrayBuffer | TypedArray | DataView | FormData | URLSearchParams | ReadableStream | null | null | Inhalt des Requests. Bei GET und HEAD nicht erlaubt. Bei FormData und URLSearchParams wird der Content-Type automatisch gesetzt. |
| $mode | "cors" | "no-cors" | "same-origin" | "navigate" | "cors" | CORS-Modus. Mit "no-cors" bekommt man eine opaque Antwort, deren Inhalt man nicht lesen kann. "navigate" ist nur für Navigationen gedacht und lässt sich nicht selbst setzen. |
| $credentials | "omit" | "same-origin" | "include" | "same-origin" | Legt fest, ob Cookies, HTTP-Authentifizierung und TLS-Client-Zertifikate mitgeschickt werden. Für Cross-Origin-Anfragen mit Cookies braucht man "include". |
| $cache | "default" | "no-store" | "reload" | "no-cache" | "force-cache" | "only-if-cached" | "default" | Legt fest, wie der Request mit dem HTTP-Cache des Browsers umgeht. "only-if-cached" funktioniert nur zusammen mit mode: "same-origin". |
| $redirect | "follow" | "error" | "manual" | "follow" | Umgang mit Weiterleitungen (3xx): automatisch folgen, einen Fehler auslösen oder die Weiterleitung manuell behandeln (dann bekommt man eine opaqueredirect-Antwort). |
| $referrer | string | "about:client" | Referrer des Requests. Eine gleich-originige URL, "about:client" (Standard) oder "", wenn kein Referrer gesendet werden soll. |
| $referrerPolicy | string | Referrer-Richtlinie, z. B. "no-referrer", "origin", "strict-origin-when-cross-origin". |
|
| $integrity | string | "" | Subresource-Integrity-Hash, z. B. "sha384-…". Passt der Inhalt der Antwort nicht dazu, schlägt der Request fehl. |
| $keepalive | boolean | false | Der Request läuft weiter, auch wenn die Seite geschlossen wird. Die Größe aller Bodys mit keepalive ist zusammen auf etwa 64 KiB begrenzt. |
| $signal | AbortSignal | null | null | Signal, mit dem man den Request abbrechen kann, z. B. über AbortController oder AbortSignal.timeout(ms). |
| $priority | "high" | "low" | "auto" | "auto" | Hinweis an den Browser, wie wichtig der Request im Vergleich zu anderen Requests ist (Fetch Priority API). |
| $duplex | "half" | Pflicht, wenn body ein ReadableStream ist. Der einzige erlaubte Wert ist "half". |
|
| $window | null | Darf nur null sein. Löst den Request von einem Fenster-Kontext. |
Rückgabewert
Typ
void
Beschreibung
RequestInit ist ein reines Options-Objekt ohne eigenen Rückgabewert. Es wird von fetch() (gibt Promise<Response> zurück) und von new Request() ausgewertet.Beispiele
JSON per POST an eine REST-API senden
const createUser = async (user) => {
const response = await fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
},
body: JSON.stringify(user)
});
if (!response.ok) {
throw new Error(`HTTP-Fehler: ${response.status}`);
}
return response.json();
};
createUser({ name: 'Anna', role: 'admin' })
.then((data) => console.log('Angelegt:', data))
.catch(console.error);Angelegt: { id: 42, name: 'Anna', role: 'admin' }
Timeout und Cross-Origin-Cookies
const loadProfile = async () => {
try {
const response = await fetch('https://auth.example.com/me', {
credentials: 'include', // Cookies auch cross-origin senden
cache: 'no-store', // nie aus dem Cache laden
signal: AbortSignal.timeout(5000) // nach 5 s abbrechen
});
return await response.json();
} catch (err) {
if (err.name === 'TimeoutError') {
console.warn('Server antwortet nicht rechtzeitig');
} else {
throw err;
}
}
};
loadProfile();Server antwortet nicht rechtzeitig (falls Timeout)
Datei-Upload mit FormData und wiederverwendbarem Request
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async () => {
const formData = new FormData();
formData.append('avatar', input.files[0]);
// RequestInit auch im Request-Konstruktor nutzbar
const request = new Request('/api/upload', {
method: 'POST',
body: formData // Content-Type NICHT selbst setzen – Boundary wird automatisch ergänzt
});
const response = await fetch(request);
console.log(response.status);
});201
Analytics-Daten beim Verlassen der Seite senden
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
fetch('/analytics', {
method: 'POST',
keepalive: true, // Request überlebt das Schließen der Seite
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ event: 'page_leave', ts: Date.now() })
});
}
});