Response

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.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die Response-Schnittstelle der Fetch API repräsentiert die Antwort auf eine Anfrage.

Sie können ein neues Response-Objekt mit dem Response()-Konstruktor erstellen, aber es ist wahrscheinlicher, dass Ihnen ein Response-Objekt als Ergebnis einer anderen API-Operation begegnet - zum Beispiel ein Service Worker FetchEvent.respondWith oder ein einfacher fetch().

Konstruktor

Response(): Erstellt ein neues Response-Objekt.

Instanz-Eigenschaften

Response.body Schreibgeschützt: Ein ReadableStream des Inhalts des Körpers.
Response.bodyUsed Schreibgeschützt: Speichert einen boolean-Wert, der angibt, ob der Körper in einer Antwort bereits verwendet wurde.
Response.headers Schreibgeschützt: Das Headers-Objekt, das mit der Antwort verknüpft ist.
Response.ok Schreibgeschützt: Ein boolean, der angibt, ob die Antwort erfolgreich war (Status im Bereich 200 – 299) oder nicht.
Response.redirected Schreibgeschützt: Gibt an, ob die Antwort das Ergebnis einer Umleitung ist (d. h., ob ihre URL-Liste mehr als einen Eintrag enthält).
Response.status Schreibgeschützt: Der Statuscode der Antwort. (Dies wird 200 bei einem Erfolg sein).
Response.statusText Schreibgeschützt: Die Statusnachricht, die dem Statuscode entspricht. (z. B. OK für 200).
Response.type Schreibgeschützt: Der Typ der Antwort (z. B. basic, cors).
Response.url Schreibgeschützt: Die URL der Antwort.

Statische Methoden

Response.error(): Gibt ein neues Response-Objekt zurück, das mit einem Netzwerkfehler verknüpft ist.
Response.redirect(): Gibt eine neue Antwort mit einer anderen URL zurück.
Response.json(): Gibt ein neues Response-Objekt zurück, um die bereitgestellten JSON-codierten Daten zurückzugeben.

Instanz-Methoden

Response.arrayBuffer(): Gibt ein Promise zurück, das mit einer ArrayBuffer-Darstellung des Antwortkörpers aufgelöst wird.
Response.blob(): Gibt ein Promise zurück, das mit einer Blob-Darstellung des Antwortkörpers aufgelöst wird.
Response.bytes(): Gibt ein Promise zurück, das mit einer Uint8Array-Darstellung des Antwortkörpers aufgelöst wird.
Response.clone(): Erstellt ein Duplikat eines Response-Objekts.
Response.formData(): Gibt ein Promise zurück, das mit einer FormData-Darstellung des Antwortkörpers aufgelöst wird.
Response.json(): Gibt ein Promise zurück, das mit dem Ergebnis des Parsens des Antwortkörpers als JSON aufgelöst wird.
Response.text(): Gibt ein Promise zurück, das mit einer Textdarstellung des Antwortkörpers aufgelöst wird.

Beispiele

Ein Bild abrufen

In unserem einfachen Fetch-Beispiel (Beispiel live ausführen) verwenden wir einen einfachen fetch()-Aufruf, um ein Bild zu holen und es in einem <img>-Element anzuzeigen. Der fetch()-Aufruf gibt ein Promise zurück, das mit dem Response-Objekt aufgelöst wird, das mit der Ressourcenabruffunktion verknüpft ist.

Sie werden feststellen, dass wir, da wir ein Bild anfordern, Response.blob ausführen müssen, um der Antwort ihren korrekten MIME-Typ zu geben.

const image = document.querySelector(".my-image");
fetch("flowers.jpg")
  .then((response) => response.blob())
  .then((blob) => {
    const objectURL = URL.createObjectURL(blob);
    image.src = objectURL;
  });

Sie können auch den Response()-Konstruktor verwenden, um Ihr eigenes benutzerdefiniertes Response-Objekt zu erstellen:

const response = new Response();

Ein PHP-Aufruf

Hier rufen wir eine PHP-Programmdaten-Datei auf, die einen JSON-String generiert und das Ergebnis als JSON-Wert anzeigt.

// Function to fetch JSON using PHP
const getJSON = async () => {
  // Generate the Response object
  const response = await fetch("getJSON.php");
  if (response.ok) {
    // Get JSON value from the response body
    return response.json();
  }
  throw new Error("*** PHP file not found");
};

// Call the function and output value or error message to console
getJSON()
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

Spezifikationen

Specification
Fetch Standard # response-class

Browser-Kompatibilität

BCD tables only load in the browser