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.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

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 Nur lesbar: Ein ReadableStream des Körperinhalts.
Request.bodyUsed Nur lesbar: Speichert true oder false, um anzuzeigen, ob der Körper in einer Anfrage bereits verwendet wurde oder nicht.
Request.cache Nur lesbar: Enthält den Cache-Modus der Anfrage (z.B. default, reload, no-cache).
Request.credentials Nur lesbar: Enthält die Anmeldeinformationen der Anfrage (z.B. omit, same-origin, include). Der Standardwert ist same-origin.
Request.destination Nur lesbar: Ein String, der den Typ des angeforderten Inhalts beschreibt.
Request.headers Nur lesbar: Enthält das zugehörige Headers Objekt der Anfrage.
Request.integrity Nur lesbar: Enthält den Subresource-Integrität Wert der Anfrage (z.B. sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
Request.isHistoryNavigation Nur lesbar: Ein Boolean, der anzeigt, ob es sich bei der Anfrage um eine Historiennavigation handelt.
Request.keepalive Nur lesbar: 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 Nur lesbar: Enthält die Methode der Anfrage (GET, POST, etc.)
Request.mode Nur lesbar: Enthält den Modus der Anfrage (z.B. cors, no-cors, same-origin, navigate.)
Request.redirect Nur lesbar: Enthält den Modus, wie Umleitungen behandelt werden. Er kann follow, error oder manual sein.
Request.referrer Nur lesbar: Enthält den Referrer der Anfrage (z.B. client).
Request.referrerPolicy Nur lesbar: Enthält die Referrer-Policy der Anfrage (z.B. no-referrer).
Request.signal Nur lesbar: Gibt das AbortSignal zurück, das mit der Anfrage verbunden ist.
Request.url Nur lesbar: 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:

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:

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:

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:

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 Standard # request-class

Browser-Kompatibilität

BCD tables only load in the browser