DasResponse-Interface derFetch API stellt die Antwort auf eine Anfrage dar.

Sie können ein neuesResponse-Objekt mit demResponse()-Konstruktor erstellen. Wahrscheinlicher ist jedoch, dass Sie einResponse-Objekt als Ergebnis einer anderen API-Operation erhalten – zum Beispiel in einem Serviceworker überFetchEvent.respondWith oder durch einen einfachenfetch()-Aufruf.

Konstruktor

Response()

Erstellt ein neuesResponse-Objekt.

Instanz-Eigenschaften

Response.bodySchreibgeschützt

EinReadableStream der Inhaltsdaten.

Response.bodyUsedSchreibgeschützt

Speichert einen booleschen Wert, der angibt, ob der Inhalt in einer Antwort bereits verwendet wurde.

Response.headersSchreibgeschützt

Das mit der Antwort verbundeneHeaders-Objekt.

Response.okSchreibgeschützt

Ein boolescher Wert, der angibt, ob die Antwort erfolgreich war (Status im Bereich von200 –299).

Response.redirectedSchreibgeschützt

Gibt an, ob die Antwort das Ergebnis einer Umleitung ist (d.h. ob die URL-Liste mehr als einen Eintrag hat).

Response.statusSchreibgeschützt

Der Statuscode der Antwort. (Dieser ist200 für einen Erfolg).

Response.statusTextSchreibgeschützt

Die Statusmeldung, die dem Statuscode entspricht. (z.B.OK für200).

Response.typeSchreibgeschützt

Der Typ der Antwort (z.B.basic,cors).

Response.urlSchreibgeschützt

Die URL der Antwort.

Statische Methoden

Response.error()

Gibt ein neuesResponse-Objekt zurück, das einem Netzwerkfehler zugeordnet ist.

Response.redirect()

Gibt eine neue Antwort mit einer anderen URL zurück.

Response.json()

Gibt ein neuesResponse-Objekt für die Rückgabe der bereitgestellten JSON-kodierten Daten zurück.

Instanz-Methoden

Response.arrayBuffer()

Gibt ein Promise zurück, das mit einerArrayBuffer-Darstellung des Antwortinhalts aufgelöst wird.

Response.blob()

Gibt ein Promise zurück, das mit einerBlob-Darstellung des Antwortinhalts aufgelöst wird.

Response.bytes()

Gibt ein Promise zurück, das mit einerUint8Array-Darstellung des Antwortinhalts aufgelöst wird.

Response.clone()

Erzeugt eine Kopie einesResponse-Objekts.

Response.formData()

Gibt ein Promise zurück, das mit einerFormData-Darstellung des Antwortinhalts aufgelöst wird.

Response.json()

Gibt ein Promise zurück, das mit dem Ergebnis des Parsens des Antworttextes alsJSON aufgelöst wird.

Response.text()

Gibt ein Promise zurück, das mit einer Textdarstellung des Antwortinhalts aufgelöst wird.

Beispiele

Abrufen eines Bildes

In unseremeinfachen Fetch-Beispiel (Beispiel live ausführen) verwenden wir einen einfachenfetch()-Aufruf, um ein Bild abzurufen und es in einem<img>-Element anzuzeigen.Derfetch()-Aufruf gibt ein Promise zurück, das auf das mit der Ressourcenabfrage verbundeneResponse-Objekt aufgelöst wird.

Da wir ein Bild anfordern, müssen wirResponse.blob ausführen, um dem Antwortobjekt seinen korrekten MIME-Typ zuzuweisen.

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

Sie können auch denResponse()-Konstruktor verwenden, um Ihr eigenes benutzerdefiniertesResponse-Objekt zu erstellen:

const response = new Response();

Ein PHP-Aufruf

Hier rufen wir eine PHP-Programmdatei auf, die eine JSON-Zeichenfolge generiert und das Ergebnis als JSON-Wert anzeigt.

// Function to fetch JSON using PHPconst 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 consolegetJSON()  .then((result) => console.log(result))  .catch((error) => console.error(error));

Spezifikationen

Browser-Kompatibilität

Siehe auch

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