Start · Sprachen · JavaScript · Referenz · Response

Response

Schnittstelle

Das <code>Response</code>-Interface der Fetch API repräsentiert die Antwort auf einen Request.

Kategorie: webapi

Signatur

Response

Beschreibung

Das Response-Interface der Fetch API repräsentiert die Antwort auf einen Request.

Sie können ein neues Response-Objekt mit dem Response()-Konstruktor erzeugen, häufiger begegnet Ihnen ein Response-Objekt aber als Rückgabewert einer anderen API-Operation – zum Beispiel eines Service-Worker-FetchEvent.respondWith oder eines einfachen fetch().

Konstruktor

  • Response() – Erzeugt ein neues Response-Objekt.

Instanz-Eigenschaften

  • Response.body (schreibgeschützt) – Ein ReadableStream des Body-Inhalts.
  • Response.bodyUsed (schreibgeschützt) – Speichert einen booleschen Wert, der angibt, ob der Body in einer Response bereits verwendet wurde.
  • Response.headers (schreibgeschützt) – Das mit der Response verknüpfte Headers-Objekt.
  • Response.ok (schreibgeschützt) – Ein boolescher Wert, der angibt, ob die Response erfolgreich war (Status im Bereich 200 – 299) oder nicht.
  • Response.redirected (schreibgeschützt) – Gibt an, ob die Response das Ergebnis einer Weiterleitung ist (das heißt, ihre URL-Liste mehr als einen Eintrag hat).
  • Response.status (schreibgeschützt) – Der Statuscode der Response. (Bei Erfolg 200.)
  • Response.statusText (schreibgeschützt) – Die zum Statuscode gehörende Statusmeldung (z. B. OK für 200).
  • Response.type (schreibgeschützt) – Der Typ der Response (z. B. basic, cors).
  • Response.url (schreibgeschützt) – Die URL der Response.

Statische Methoden

  • Response.error() – Gibt ein neues Response-Objekt zurück, das mit einem Netzwerkfehler assoziiert ist.
  • Response.redirect() – Gibt eine neue Response mit einer anderen URL zurück.
  • Response.json() – Gibt ein neues Response-Objekt zurück, das die bereitgestellten JSON-kodierten Daten zurückliefert.

Instanz-Methoden

  • Response.arrayBuffer() – Gibt ein Promise zurück, das mit einer ArrayBuffer-Repräsentation des Response-Bodys aufgelöst wird.
  • Response.blob() – Gibt ein Promise zurück, das mit einer Blob-Repräsentation des Response-Bodys aufgelöst wird.
  • Response.bytes() – Gibt ein Promise zurück, das mit einer Uint8Array-Repräsentation des Response-Bodys aufgelöst wird.
  • Response.clone() – Erzeugt einen Klon eines Response-Objekts.
  • Response.formData() – Gibt ein Promise zurück, das mit einer FormData-Repräsentation des Response-Bodys aufgelöst wird.
  • Response.json() – Gibt ein Promise zurück, das mit dem Ergebnis des Parsens des Response-Body-Textes als JSON aufgelöst wird.
  • Response.text() – Gibt ein Promise zurück, das mit einer Text-Repräsentation des Response-Bodys aufgelöst wird.
  • Response.textStream() (experimentell) – Gibt einen ReadableStream zurück, mit dem der Inhalt des Response-Bodys in UTF-8-Chunks gelesen werden kann.

Beispiele

Ein Bild abrufen

const image = document.querySelector(".my-image");
fetch("flowers.jpg")
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.blob();
  })
  .then((blob) => {
    const objectURL = URL.createObjectURL(blob);
    image.src = objectURL;
  })
  .catch((error) => {
    console.error("Error fetching the image:", error);
  });

Eigenes Response-Objekt erzeugen

const response = new Response();

Ein PHP-Aufruf

// 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));