Request

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

* Some parts of this feature may have varying levels of support.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das Request-Interface der Fetch API repräsentiert eine Ressourcenanforderung.

Sie können ein neues Request-Objekt mit dem Request() Konstruktor erstellen, es ist jedoch wahrscheinlicher, dass Sie auf ein Request-Objekt stoßen, das als Ergebnis einer anderen API-Operation zurückgegeben wird, wie zum Beispiel ein Service Worker FetchEvent.request.

Konstruktor

Request()

Erstellt ein neues Request-Objekt.

Instanz-Eigenschaften

Request.body Schreibgeschützt

Ein ReadableStream des Körperinhalts.

Request.bodyUsed Schreibgeschützt

Speichert true oder false, um anzuzeigen, ob der Körper in einer Anfrage bereits verwendet wurde oder nicht.

Request.cache Schreibgeschützt

Enthält den Cache-Modus der Anfrage (z.B. default, reload, no-cache).

Request.credentials Schreibgeschützt

Enthält die Anmeldeinformationen der Anfrage (z.B. omit, same-origin, include). Der Standardwert ist same-origin.

Request.destination Schreibgeschützt

Ein String, der den Typ des angeforderten Inhalts beschreibt.

Request.headers Schreibgeschützt

Enthält das zugehörige Headers Objekt der Anfrage.

Request.integrity Schreibgeschützt

Enthält den Subresource-Integrität Wert der Anfrage (z.B. sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

Request.isHistoryNavigation Schreibgeschützt

Ein Boolean, der anzeigt, ob es sich bei der Anfrage um eine Historiennavigation handelt.

Request.keepalive Schreibgeschützt

Enthält die keepalive-Einstellung der Anfrage (true oder false), die angibt, ob der Browser die zugehörige Anfrage am Leben hält, wenn die Seite, die sie initiiert hat, entladen wird, bevor die Anfrage abgeschlossen ist.

Request.method Schreibgeschützt

Enthält die Methode der Anfrage (GET, POST, etc.)

Request.mode Schreibgeschützt

Enthält den Modus der Anfrage (z.B. cors, no-cors, same-origin, navigate.)

Request.redirect Schreibgeschützt

Enthält den Modus, wie Umleitungen behandelt werden. Er kann follow, error oder manual sein.

Request.referrer Schreibgeschützt

Enthält den Referrer der Anfrage (z.B. client).

Request.referrerPolicy Schreibgeschützt

Enthält die Referrer-Policy der Anfrage (z.B. no-referrer).

Request.signal Schreibgeschützt

Gibt das AbortSignal zurück, das mit der Anfrage verbunden ist.

Request.url Schreibgeschützt

Enthält die URL der Anfrage.

Instanz-Methoden

Request.arrayBuffer()

Gibt ein Promise zurück, das sich mit einer ArrayBuffer Darstellung des Anfragekörpers auflöst.

Request.blob()

Gibt ein Promise zurück, das sich mit einer Blob Darstellung des Anfragekörpers auflöst.

Request.bytes()

Gibt ein Promise zurück, das sich mit einer Uint8Array Darstellung des Anfragekörpers auflöst.

Request.clone()

Erstellt eine Kopie des aktuellen Request-Objekts.

Request.formData()

Gibt ein Promise zurück, das sich mit einer FormData Darstellung des Anfragekörpers auflöst.

Request.json()

Gibt ein Promise zurück, das sich mit dem Ergebnis des Parsing des Anfragekörpers als JSON auflöst.

Request.text()

Gibt ein Promise zurück, das sich mit einer Textdarstellung des Anfragekörpers auflöst.

Hinweis: Die Anfragekörper-Funktionen können nur einmal ausgeführt werden; nachfolgende Aufrufe führen zu einer Ablehnung mit einem TypeError, der anzeigt, dass der Körper-Stream bereits verwendet wurde.

Beispiele

Im folgenden Codeausschnitt erstellen wir eine neue Anfrage mit dem Request()-Konstruktor (für eine Bilddatei im gleichen Verzeichnis wie das Skript) und geben einige Eigenschaftswerte der Anfrage zurück:

js
const request = new Request("https://www.mozilla.org/favicon.ico");

const url = request.url;
const method = request.method;
const credentials = request.credentials;

Sie könnten diese Anfrage dann durch Übergeben des Request-Objekts als Parameter an einen fetch()-Aufruf abrufen, zum Beispiel:

js
fetch(request)
  .then((response) => response.blob())
  .then((blob) => {
    image.src = URL.createObjectURL(blob);
  });

Im folgenden Codeausschnitt erstellen wir eine neue Anfrage mit dem Request()-Konstruktor mit einigen Anfangsdaten und Körperinhalten für eine API-Anfrage, die eine Körper-Nutzlast benötigt:

js
const request = new Request("https://example.com", {
  method: "POST",
  body: '{"foo": "bar"}',
});

const url = request.url;
const method = request.method;
const credentials = request.credentials;
const bodyUsed = request.bodyUsed;

Hinweis: Der Körper kann nur ein Blob, ein ArrayBuffer, ein TypedArray, ein DataView, ein FormData, ein URLSearchParams, ein ReadableStream oder ein String Objekt sowie ein Stringliteral sein. Um ein JSON-Objekt zur Nutzlast hinzuzufügen, müssen Sie dieses Objekt serialisieren.

Sie könnten diese API-Anfrage dann durch Übergeben des Request-Objekts als Parameter an einen fetch()-Aufruf abrufen und die Antwort erhalten:

js
fetch(request)
  .then((response) => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error("Something went wrong on API server!");
    }
  })
  .then((response) => {
    console.debug(response);
    // …
  })
  .catch((error) => {
    console.error(error);
  });

Spezifikationen

Specification
Fetch
# request-class

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Request
Request() constructor
cross-origin referrer stripped out and navigate mode converted to same-origin when constructor created from existing Request object.
init.attributionReporting parameter
Experimental
init.browsingTopics parameter
ExperimentalNon-standard
init.duplex parameter
Experimental
init.keepalive parameter
init.priority parameter
init.referrer parameter
Send ReadableStream in request body
Experimental
Consume ReadableStream as a response body
arrayBuffer
blob
body
bodyUsed
bytes
cache
cache.only-if-cached
clone
credentials
Default value same-origin
destination
duplex
Experimental
formData
headers
integrity
isHistoryNavigation
json
keepalive
method
mode
navigate mode
redirect
referrer
referrerPolicy
signal
targetAddressSpace
Experimental
text
url

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

Siehe auch