Request: Request() Konstruktor

input

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

• Ein String, der die URL der Ressource enthält, die Sie abrufen möchten. Die URL kann relativ zur Basis-URL sein, welche im Dokumentkontext das baseURI ist oder im Worker-Kontext WorkerGlobalScope.location.
• Ein Request-Objekt, wodurch effektiv eine Kopie erstellt wird. Beachten Sie die folgenden Verhaltensänderungen, um die Sicherheit zu gewährleisten und den Konstruktor weniger anfällig für Ausnahmen zu machen:
  • Wenn dieses Objekt von einer anderen Herkunft als der des Konstruktors stammt, wird der Request.referrer entfernt.
  • Wenn dieses Objekt einen Request.mode von navigate hat, wird der mode-Wert in same-origin umgewandelt.

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 vorhandenen Request konstruieren, ersetzen alle Optionen, die Sie im options-Argument für den neuen Request setzen, alle entsprechenden Optionen, die im ursprünglichen Request festgelegt 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 z.B. 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 für die Antwort aus, um ihr den richtigen MIME-Typ zu geben, damit sie korrekt gehandhabt wird, dann erstellen wir eine Objekt-URL davon 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) machen 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 beim 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 Aufruf der clone()-Methode.)

const copy = new Request(req);

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