Anfrage: Request() Konstruktor
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.
Der Request()
Konstruktor erstellt ein neues
Request
-Objekt.
Syntax
new Request(input)
new Request(input, options)
Parameter
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, die im Kontext eines Fensters das
baseURI
des Dokuments oder im Kontext eines WorkersWorkerGlobalScope.location
ist. -
Ein
Request
-Objekt, das effektiv eine Kopie erstellt. Beachten Sie die folgenden Verhaltensänderungen, um die Sicherheit zu wahren und es unwahrscheinlicher zu machen, dass der Konstruktor Ausnahmen wirft:- Wenn dieses Objekt von einem anderen Ursprung als der Aufruf des Konstruktors stammt, wird der
Request.referrer
entfernt. - Wenn dieses Objekt einen
Request.mode
vonnavigate
hat, wird dermode
-Wert insame-origin
umgewandelt.
- Wenn dieses Objekt von einem anderen Ursprung als der Aufruf des Konstruktors stammt, wird der
-
options
Optional-
Ein
RequestInit
-Objekt, das alle benutzerdefinierten Einstellungen enthält, die Sie auf die Anfrage anwenden möchten.Wenn Sie eine neue
Request
von einer vorhandenenRequest
konstruieren, ersetzt jede Option, die Sie in einem options-Argument für die neue Anfrage festlegen, alle entsprechenden Optionen, die in der ursprünglichenRequest
festgelegt wurden. Zum Beispiel:jsconst 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
TypeError
-
Die URL enthält Anmeldedaten, wie
http://user:password@example.com
, oder kann nicht geparst werden.
Beispiele
In unserem Fetch-Anfragebeispiel (siehe Fetch-Anfrage 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
auf der Antwort aus, um ihm den richtigen MIME-Typ zu geben, damit es richtig behandelt wird, erstellen dann eine Object-URL davon und zeigen es 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-Anfrage-mit-init-Beispiel (siehe Fetch-Anfrage-init live) tun wir dasselbe, außer dass wir beim Aufruf von fetch()
ein options-Objekt übergeben.
In diesem Fall können wir einen Cache-Control
-Wert setzen, um anzugeben, welche Art von zwischengespeicherten Antworten uns recht 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 der Request zu erstellen (Dies ist ähnlich dem Aufruf der clone()
-Methode.)
const copy = new Request(req);
Hinweis: Diese letzte Verwendung ist wahrscheinlich nur in ServiceWorkers nützlich.
Spezifikationen
Specification |
---|
Fetch # ref-for-dom-request① |