Request: Request() Konstruktor

input

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

• Eine Zeichenkette, die die URL der Ressource enthält, die Sie abrufen möchten. Die URL kann relativ zur Basis-URL sein, welche die baseURI des Dokuments in einem Fensterkontext oder WorkerGlobalScope.location in einem Worker-Kontext ist.

• Ein Request-Objekt, das effektiv eine Kopie erstellt. Beachten Sie die folgenden Verhaltensänderungen, um die Sicherheit zu gewährleisten, während der Konstruktor weniger wahrscheinlich Ausnahmen auslöst:

  • Falls dieses Objekt in einem anderen Ursprung zum Konstruktoraufruf existiert, wird der Request.referrer entfernt.
  • Falls dieses Objekt einen Request.mode von navigate hat, wird der mode-Wert in same-origin geändert.

options Optional

Ein RequestInit-Objekt, das alle benutzerdefinierten Einstellungen enthält, die Sie auf die Anfrage anwenden möchten.

Wenn Sie einen neuen Request aus einem bestehenden Request erstellen, ersetzen alle im options-Argument für die neue Anfrage gesetzten Optionen alle entsprechenden Optionen, die im ursprünglichen Request gesetzt wurden. Zum 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"

TypeError

Die URL enthält Anmeldedaten, wie in http://user:password@example.com, oder kann nicht analysiert werden.

In unserem Fetch Request Beispiel (siehe Fetch Request live) erstellen wir ein neues Request-Objekt mithilfe des Konstruktors und rufen es dann mit einem fetch()-Aufruf ab. Da wir ein Bild abrufen, führen wir Response.blob auf die Antwort aus, um ihr den richtigen MIME-Typ zu geben, damit sie ordnungsgemäß behandelt wird, erstellen dann eine Objekt-URL daraus und zeigen sie 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 mit Init-Beispiel (siehe Fetch Request init live) tun wir dasselbe, außer dass wir ein options-Objekt übergeben, wenn wir fetch() aufrufen. In diesem Fall können wir einen Cache-Control-Wert setzen, um anzugeben, welche Art von zwischengespeicherten Antworten für uns in Ordnung sind:

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) => {
  // ...
});

Beachten Sie, dass Sie options auch in den fetch-Aufruf übergeben könnten, um denselben Effekt zu erzielen, z. B.:

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

Sie können auch ein Objektliteral als headers in options verwenden.

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

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

Sie können auch ein Request-Objekt an den Request()-Konstruktor übergeben, um eine Kopie des Requests zu erstellen (Dies ist ähnlich dem Aufrufen der clone()-Methode.)

const copy = new Request(req);

• ServiceWorker API
• HTTP Access Control (CORS)
• HTTP