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, die im Fensterkontext das baseURI des Dokuments oder im Worker-Kontext WorkerGlobalScope.location ist.

• Ein Request-Objekt, das effektiv eine Kopie erstellt. Beachten Sie die folgenden Verhaltensaktualisierungen, um die Sicherheit zu wahren und die Wahrscheinlichkeit von Ausnahmen beim Aufrufen des Konstruktors zu reduzieren:

  • Wenn dieses Objekt von einer anderen Herkunft als dem Aufruf des Konstruktors existiert, wird der Request.referrer entfernt.
  • Wenn dieses Objekt einen Request.mode von navigate hat, wird der mode-Wert in same-origin konvertiert.

options Optional

Ein RequestInit-Objekt, das benutzerdefinierte Einstellungen enthält, die Sie auf die Anforderung anwenden möchten.

Wenn Sie einen neuen Request basierend auf einem vorhandenen Request erstellen, ersetzt jede Option, die Sie im options-Argument für den neuen Request festlegen, 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 http://user:password@example.com, oder kann nicht geparst werden.

In unserem Fetch Request-Beispiel (siehe Fetch Request live) erstellen wir ein neues Request-Objekt mit dem Konstruktor 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 den richtigen MIME-Typ zu erhalten, damit es korrekt verarbeitet wird. Anschließend erstellen wir 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) machen wir dasselbe, außer dass wir beim Aufrufen von fetch() ein options-Objekt übergeben. In diesem Fall können wir einen Cache-Control-Wert festlegen, um anzugeben, mit welcher Art von zwischengespeicherten Antworten wir einverstanden 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 einfügen können, um den gleichen Effekt zu erzielen, z. B.:

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

Sie können auch ein Objektsliteral 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 ähnelt dem Aufruf der clone()-Methode).

const copy = new Request(req);

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