Syntax

new Request(input)
new Request(input, options)

Parameter

input

Definiert die Ressource, die Sie abrufen möchten. Dies kann Folgendes sein:

• Ein String mit der URL der Ressource, die Sie abrufen möchten. Die URL kann relativ zur Basis-URL sein. In einem Window-Kontext ist dies die baseURI des Dokuments, in einem Worker-Kontext WorkerGlobalScope.location.
• Ein Request-Objekt, wodurch praktisch eine Kopie erstellt wird. Beachten Sie die folgenden Verhaltensanpassungen, die die Sicherheit gewährleisten und zugleich die Wahrscheinlichkeit verringern, dass der Konstruktor Ausnahmen auslöst:
  • Wenn dieses Objekt von einem anderen Origin stammt als der Konstruktoraufruf, wird Request.referrer entfernt.
  • Wenn Request.mode dieses Objekts den Wert navigate hat, wird der Wert von mode in same-origin umgewandelt.

options Optional

Ein RequestInit-Objekt mit benutzerdefinierten Einstellungen, die Sie auf die Anfrage anwenden möchten.

Wenn Sie ein neues Request-Objekt aus einem vorhandenen Request-Objekt erstellen, ersetzen die Einstellungen im Argument options der neuen Anfrage die entsprechenden Einstellungen des ursprünglichen Request-Objekts. Beispiel:

js

const oldRequest = new Request(
  "https://github.com/mdn/content/issues/12959",
  { headers: { From: "webmaster@example.org" } },
);
oldRequest.headers.get("From"); // "webmaster@example.org"
const newRequest = new Request(oldRequest, {
  headers: { From: "developer@example.org" },
});
newRequest.headers.get("From"); // "developer@example.org"

Ausnahmen

NotAllowedError DOMException

Wird ausgelöst, wenn:

• Die Verwendung der Topics API durch eine browsing-topics-Permissions Policy ausdrücklich untersagt ist und browsingTopics auf true gesetzt ist.
• Die Verwendung von Operationen der Private State Token API durch eine private-state-token-issuance- oder private-state-token-redemption-Permissions Policy ausdrücklich untersagt ist und die Option privateToken angegeben wurde, einschließlich eines nicht zulässigen Typs für privateToken.operation.

TypeError

Wird ausgelöst, wenn:

• Die URL Zugangsdaten enthält, beispielsweise http://user:password@example.com, oder nicht geparst werden kann.
• Die Initialisierungsoption privateToken angegeben wurde, einschließlich eines privateToken.operation-Typs mit dem Wert send-redemption-record, und das Array privateToken.issues leer oder nicht festgelegt war oder eine oder mehrere der angegebenen issuers keine vertrauenswürdigen HTTPS-URLs sind.

Beispiele

In unserem Fetch-Request-Beispiel (siehe Fetch-Request-Live-Demo) erstellen wir mit dem Konstruktor ein neues Request-Objekt und rufen die Ressource anschließend mit fetch() ab. Da wir ein Bild abrufen, rufen wir Response.blob für die Antwort auf, damit sie den passenden MIME-Typ erhält und korrekt verarbeitet wird. Anschließend erstellen wir daraus eine Objekt-URL und zeigen das Bild in einem <img>-Element an.

const myImage = document.querySelector("img");
const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => response.blob())
  .then((response) => {
    const objectURL = URL.createObjectURL(response);
    myImage.src = objectURL;
  });

In unserem Fetch-Request-Beispiel mit Initialisierungsoptionen (siehe Live-Demo) gehen wir genauso vor, übergeben beim Aufruf von fetch() jedoch zusätzlich ein options-Objekt. In diesem Fall können wir einen Wert für Cache-Control festlegen, um anzugeben, welche Arten zwischengespeicherter Antworten wir akzeptieren:

const myImage = document.querySelector("img");
const reqHeaders = new Headers();

// A cached response is okay unless it's more than a week old.
reqHeaders.set("Cache-Control", "max-age=604800");

const options = {
  headers: reqHeaders,
};

// pass init as an "options" object with our headers
const req = new Request("flowers.jpg", options);

fetch(req).then((response) => {
  // …
});

Sie können options auch direkt an den fetch-Aufruf übergeben, um denselben Effekt zu erzielen, beispielsweise:

fetch(req, options).then((response) => {
  // …
});

Sie können für headers in options auch ein Objektliteral verwenden.

const options = {
  headers: {
    "Cache-Control": "max-age=60480",
  },
};

const req = new Request("flowers.jpg", options);

Sie können dem Request()-Konstruktor außerdem ein Request-Objekt übergeben, um eine Kopie des Request-Objekts zu erstellen. Dies ähnelt dem Aufruf der Methode clone().

const copy = new Request(req);

Spezifikationen

Browser-Kompatibilität

Siehe auch

• ServiceWorker API
• HTTP-Zugriffskontrolle (CORS)
• HTTP