Anfrage

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.

Die Request-Schnittstelle der Fetch API stellt eine Ressourcenanfrage dar.

Sie können ein neues Request-Objekt mit dem Request()-Konstruktor erstellen, aber es ist wahrscheinlicher, dass Ihnen ein Request-Objekt als Ergebnis einer anderen API-Operation begegnet, wie beispielsweise einem Service-Worker FetchEvent.request.

Konstruktor

Request(): Erstellt ein neues Request-Objekt.

Instanzeigenschaften

Request.body Schreibgeschützt: Ein ReadableStream der Körperinhalte.
Request.bodyUsed Schreibgeschützt: Speichert true oder false, um anzuzeigen, ob der Körper in einer Anfrage bereits verwendet wurde.
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 Integrity-Wert der Anfrage (z.B. sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
Request.isHistoryNavigation Schreibgeschützt: Ein Boolean, der angibt, ob die Anfrage eine Verlauf-Navigation ist.
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 Weiterleitungen gehandhabt werden. Es 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-Richtlinie der Anfrage (z.B. no-referrer).
Request.signal Schreibgeschützt: Gibt das AbortSignal zurück, das mit der Anfrage verknüpft ist.
Request.url Schreibgeschützt: Enthält die URL der Anfrage.

Instanzmethoden

Request.arrayBuffer(): Gibt ein Versprechen zurück, das mit einer ArrayBuffer-Darstellung des Anfragekörpers aufgelöst wird.
Request.blob(): Gibt ein Versprechen zurück, das mit einer Blob-Darstellung des Anfragekörpers aufgelöst wird.
Request.bytes(): Gibt ein Versprechen zurück, das mit einer Uint8Array-Darstellung des Anfragekörpers aufgelöst wird.
Request.clone(): Erstellt eine Kopie des aktuellen Request-Objekts.
Request.formData(): Gibt ein Versprechen zurück, das mit einer FormData-Darstellung des Anfragekörpers aufgelöst wird.
Request.json(): Gibt ein Versprechen zurück, das mit dem Ergebnis der Analyse des Anfragekörpers als JSON aufgelöst wird.
Request.text(): Gibt ein Versprechen zurück, das mit einer Textdarstellung des Anfragekörpers aufgelöst wird.

Hinweis: Die Funktionen für den Anfragkörper können nur einmal ausgeführt werden; nachfolgende Anrufe werden mit einem TypeError abgelehnt, der zeigt, dass der Körperstream bereits benutzt wurde.

Beispiele

Im folgenden Beispiel erstellen wir eine neue Anfrage mit dem Request()-Konstruktor (für eine Bilddatei im gleichen Verzeichnis wie das Skript) und geben dann 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 abrufen, indem Sie das Request-Objekt als Parameter in einen fetch()-Aufruf übergeben, zum Beispiel:

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

Im folgenden Beispiel erstellen wir eine neue Anfrage mit dem Request()-Konstruktor mit einigen Anfangsdaten und Körperinhalten für eine API-Anfrage, die eine Körpernutzlast 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 Zeichenfolgenliteral sein. Daher müssen Sie ein JSON-Objekt in der Nutzlast als Zeichenfolge serialisieren.

Sie könnten dann diese API-Anfrage abrufen, indem Sie das Request-Objekt als Parameter in einen fetch()-Aufruf übergeben und die Antwort erhalten, beispielsweise:

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