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: 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:

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