Antwort abrufen  – bereichsbezogen, global

Die API zum Abrufen der Antwort bietet Methoden zum Erstellen eines neuen Antwortobjekts und zum Bearbeiten des Antworttexts, der mit einer Methode der API zum Abrufen einer Anforderung erstellt wurde.

Die API zum Abrufen von Antworten ist Teil einer Reihe von Abruf -APIs, die verschiedene Aktionen zum Abrufen von Ressourcen von externen Websites bereitstellen. Die vollständige API-Sammlung zum Abrufen enthält:

• Abrufen – abrufen (Zeichenfolgenressource, Objektoptionen): Startet den Prozess zum Abrufen einer Ressource aus dem Netzwerk.
• Header abrufen : bereichsbezogen, global: Anforderungs- und Antwortheader abrufen und ändern.
• Anforderung abrufen – bereichsbezogen, global: Erstellen Sie ein neues Anforderungsobjekt.
• RequestInit abrufen : Bereichsbezogen, global: Legen Sie Optionen zum Konfigurieren einer Abrufanforderung fest.
• Antwort abrufen  – bereichsbezogen, global: Erstellen Sie ein neues Antwortobjekt.

Zur Unterstützung von Abrufaktionen ermöglicht die Systemeigenschaft glide.hosts.allowlistdie Steuerung, auf welche Hosts eine Abrufmethode zugreifen kann. Sie gilt für HTTP-APIs wie RestMessageV2 und die oben genannten. Weitere Informationen zu glide.hosts.allowlistfinden Sie unter Available system properties.

Antworteigenschaften

Die Antwort- API stellt Eigenschaften bereit, die Details zur HTTP-Antwort zurückgeben. Mit diesen Eigenschaften können Sie zur weiteren Verarbeitung auf Metadaten (wie Status, Header, Typ) und den Antworttext (body) zugreifen. Sie ermöglichen die Überprüfung des Erfolgs einer Anforderung (OK) und die Analyse der zurückgegebenen Daten in verschiedenen Formaten (z. B. JSON oder Text). Diese Eigenschaften sind wichtig für die Validierung und Verarbeitung von Serverantworten in clientseitigen Anwendungen. Ausführlichere Erklärungen zu den einzelnen Eigenschaften finden Sie unter https://developer.mozilla.org/en-US/docs/Web/API/Response.

Tabelle : 1. Antworteigenschaften

Eigenschaftsname	Beschreibung	Beispiel
body	Schreibgeschützt. Enthält einen lesbaren Stream von Bytedaten im Inhalt des Antworttexts. Gültige Werte: ReadableStream oder null. Datentyp: Zeichenfolge	const request = new Request("/myEndpoint", { method: "POST", body: "Hello world", }); request.body; // ReadableStream
„bodyUsed“	Schreibgeschützt. Kennzeichnung, die angibt, ob der Textkörper bereits gelesen wurde. Akzeptierte Werte: wahr: Text wurde gelesen. false: Der Textkörper wurde nicht gelesen. Datentyp: Boolesch	const request = new Request("/myEndpoint", { method: "POST", body: "Hello world", }); request.bodyUsed; // false request.text().then((bodyAsText) => { console.log(request.bodyUsed); // true });
headers	Schreibgeschützt. Das Header-Objekt, das der Antwort zugeordnet ist. Datentyp: Headerobjekt	const myRequest = new Request("flowers.jpg"); const myHeaders = myRequest.headers; // Headers {}
Okay	Schreibgeschützt. Kennzeichnung, die angibt, ob die Antwort erfolgreich war (Status im Bereich von 200 bis 299) oder nicht. Akzeptierte Werte: wahr: Die Antwort war erfolgreich. „falsch“: Die Antwort war nicht erfolgreich. Datentyp: Boolesch	const myImage = document.querySelector("img"); const myRequest = new Request("flowers.jpg"); fetch(myRequest).then((response) => { console.log(response.ok); // returns true if the response returned successfully response.blob().then((myBlob) => { const objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; }); });
Weitergeleitet	Schreibgeschützt. Kennzeichnung, die angibt, ob die Antwort ein Ergebnis ist, dass die Anforderung umgeleitet wurde. Akzeptierte Werte: wahr: Anforderung wurde umgeleitet. „falsch“: Anforderung wurde nicht umgeleitet. Datentyp: Boolesch	const myRequest = new Request("flowers.jpg"); const myCred = myRequest.redirect;
status	Schreibgeschützt. HTTP-Statuscodes der Antwort. Zum Beispiel 200 für Erfolg. Datentyp: Zahl	const myImage = document.querySelector("img"); const myRequest = new Request("flowers.jpg"); fetch(myRequest) .then((response) => { console.log("response.status =", response.status); // response.status = 200 return response.blob(); }) .then((myBlob) => { const objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; });
statusText	Schreibgeschützt. Statusnachricht, die dem HTTP-Statuscode in response.status entspricht Zum Beispiel wäre dies OK für einen Statuscode 200, Fortsetzen für 100, Nicht gefunden für 404. Datentyp: Zeichenfolge	const myRequest = new Request("flowers.jpg"); // Log the HTTP status and status text console.log(`Status: ${response.status}`); console.log(`Status Text: ${response.statusText}`); // Check if the response is successful if (response.ok) { console.log("Request succeeded!"); } else { console.log("Request failed."); } } catch (error) { console.error("Error fetching the URL:", error); } }
Typ	Schreibgeschützt. Typ der Antwort Akzeptierte Werte: grundlegende: Normale Antwort mit gleichem Ursprung, bei der alle Header außer „Set-Cookie“ verfügbar gemacht werden. cors: Antwort von gültiger ursprungsübergreifender Anforderung erhalten. Möglicherweise wird auf bestimmte Header und den Textkörper zugegriffen. Fehler: Netzwerkfehler. Es sind keine nützlichen Informationen verfügbar, die den Fehler beschreiben. Der Status der Antwort ist 0, Header sind leer und unveränderlich. Dies ist der Typ für eine von Response.error()abgerufene Antwort. undurchsichtig: Antwort für „no-cors“-Anforderung für ursprungsübergreifende Ressource. Schwerwiegend eingeschränkt. opaqueredirect: Die Abrufanforderung wurde mit der Umleitung „manuell“erstellt. Der Status der Antwort ist „0“, die Header sind leer, der Textkörper ist NULL, und der Anhang ist leer. Datentyp: Zeichenfolge	const myImage = document.querySelector("img"); const myRequest = new Request("flowers.jpg"); fetch(myRequest) .then((response) => { console.log("response.type =", response.type); // response.type = 'basic' return response.blob(); }) .then((myBlob) => { const objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; });
URL	Schreibgeschützt. URL der Antwort. Datentyp: Zeichenfolge	const myRequest = new Request("flowers.jpg"); const myURL = myRequest.url; // "https://github.com/mdn/dom-examples/tree/main/fetch/fetch-request/flowers.jpg"

Antwort abrufen – Antwort (Objekttext, Objektoptionen)

Erstellt ein neues Antwortobjekt mit dem Response()- Konstruktor.

Tabelle : 2. Parameter

Name	Typ	Beschreibung
body	Objekt	Optional. Ein Objekt, das einen Textkörper für die Antwort definiert. Gültige Typen: ArrayPuffer Blob DataView FormData ReadableStream Zeichenfolge Zeichenfolgenliteral TypedArray URLSearchParameter Standard: null
Optionen	Objekt	Optional. Ein Optionsobjekt, das anwenderdefinierte Einstellungen enthält, die Sie auf die Antwort anwenden möchten, oder ein leeres Objekt (Standardwert). Die möglichen Optionen lauten: Header: Alle Header, die Sie Ihrer Antwort hinzufügen möchten, enthalten in einem Header abrufen : bereichsbezogen, global -Objekt oder einem Objektliteral von Zeichenfolgen-Schlüssel-Wert-Paaren (eine Referenz finden Sie unter HTTP-Header ). Standardmäßig leer. Status: Der Statuscode für die Antwort. Der Standardwert ist 200. statusText: Die Statusnachricht, die dem Statuscode zugeordnet ist, z. B. „OK“. Der Standardwert ist „“.

In diesem Beispiel erstellen wir mit dem Konstrukteur ein neues Antwortobjekt. Dabei übergeben wir einen neuen Blob als Textkörper und ein Init-Objekt mit anwenderdefinierten Optionen für status und statusText:

const myBlob = new Blob();
const myOptions = { status: 200, statusText: "Status message!" };
const myResponse = new Response(myBlob, myOptions);

Antwort abrufen – arrayBuffer()

Gibt eine Zusage zurück, die mit einem ArrayBuffer aufgelöst wird.

Die Methode „arrayBuffer()“ ist nützlich, wenn Sie mit Binärdaten wie Bildern, Audiodateien oder anderen Binärdateien arbeiten, die verarbeitet werden müssen.

Tabelle : 3. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 4. Ergebnisse

Typ	Beschreibung
Objekt	Eine Zusage, die mit einem ArrayBufferaufgelöst wird, der einen generischen binären Rohdatenpuffer darstellt.

Tabelle : 5. Ausnahmen

Ausnahme	Beschreibung
DOMException: AbortError	Eine Ausnahme, die angibt, dass die Anforderung abgebrochen wurde.
TypeFehler	Wird aus einem der folgenden Gründe ausgelöst: Der Antworttext ist unterbrochen oder gesperrt. Beim Decodieren des Textinhalts ist ein Fehler aufgetreten (z. B. weil der Content-Encoding-Header falsch ist).
Bereichsfehler	Beim Erstellen des zugeordneten ArrayBufferist ein Problem aufgetreten. Zum Beispiel, wenn die Daten zu groß sind.

Das folgende Beispielskript ruft Binärdaten von einem Server ab und verarbeitet sie unter Verwendung der arrayBuffer() -Methode wie folgt:

1. fetch(): Ruft eine Ressource von der angegebenen URL ab.
2. response.ok: Überprüft, ob der Antwortstatus im Bereich von 200 bis 299 liegt.
3. arrayBuffer(): Liest den Antworttext und konvertiert ihn in einen ArrayBuffer, der einen generischen Rohbinärdatenpuffer mit fester Länge darstellt.
4. Uint8Array: Konvertiert den ArrayBuffer in ein Uint8Array, ein typisiertes Array zur einfachen Bearbeitung von Binärdaten.

javascriptCopy code// Simple API to fetch binary data and process it using arrayBuffer()asyncfunctionfetchBinaryData(url) {
  try {
    // Fetch the resource from the provided URLconst response = awaitfetch(url);

    // Check if the response is successfulif (!response.ok) {
      thrownewError(`HTTP error! Status: ${response.status}`);
    }

    // Convert the response body to an ArrayBufferconst arrayBuffer = await response.arrayBuffer();

    // Process the ArrayBuffer (e.g., convert it to a typed array)const uint8Array = newUint8Array(arrayBuffer);

    // Return the processed datareturn uint8Array;
  } catch (error) {
    console.error("Error fetching or processing binary data:", error);
    throw error;
  }
}

// Example usageconst binaryDataUrl = 'https://example.com/path/to/binary/data';

fetchBinaryData(binaryDataUrl)
  .then((data) => {
    console.log("Binary data as Uint8Array:", data);
    // Further processing can be done here, e.g., rendering an image or playing audio
  })
  .catch((error) => {
    console.error("Failed to fetch binary data:", error);
  });

Antwort abrufen – blob()

Gibt eine Zusage zurück, die mit einem Blob aufgelöst wird.

Tabelle : 6. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 7. Ergebnisse

Typ	Beschreibung
Objekt	Ein Prompt, das mit einem Blobaufgelöst wird.

Tabelle : 8. Ausnahmen

Ausnahme	Beschreibung
DOMException: AbortError	Eine Ausnahme, die angibt, dass die Anforderung abgebrochen wurde.
TypeFehler	Wird aus einem der folgenden Gründe ausgelöst: Der Antworttext ist unterbrochen oder gesperrt. Beim Decodieren des Textinhalts ist ein Fehler aufgetreten (z. B. weil der Content-Encoding-Header falsch ist).

Im folgenden Beispiel wird anhand der folgenden Schritte veranschaulicht, wie die Methode blob() mit der Abruf -API verwendet wird. Dieser Anwendungsfall eignet sich hervorragend, um Bilder oder andere binäre Inhalte (wie Videos oder PDFs) abzurufen und dynamisch anzuzeigen.

1. fetch(url): Ruft eine Ressource von der angegebenen URL ab.
2. response.blob(): Konvertiert den Antworttext in ein Blob-Objekt, das Binärdaten darstellt.
3. URL.createObjectURL(blob): Generiert eine temporäre URL für den Blob, die im DOM verwendet werden kann (z. B. als Bildquelle).
4. Bild an DOM anhängen: Erstellt ein Bildelement dynamisch, legt die Blob-URL als Quelle fest und hängt es an den Dokumenttext an.

async function fetchBlob(url) {
  try {
    // Fetch the resource from the provided URL
    const response = await fetch(url);

    // Check if the response is successful
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // Convert the response body to a Blob
    const blob = await response.blob();

    // Create a URL for the Blob and log it
    const blobUrl = URL.createObjectURL(blob);
    console.log("Blob URL:", blobUrl);

    // For example, you can set it as the source of an image
    const img = document.createElement('img');
    img.src = blobUrl;
    img.alt = "Fetched Blob Image";
    document.body.appendChild(img);
  } catch (error) {
    console.error("Error fetching or processing blob:", error);
  }
}

// Example usage with an image URL
const imageUrl = 'https://via.placeholder.com/150';
fetchBlob(imageUrl);

Antwort abrufen – bytes()

Gibt eine Zusage zurück, die mit einem Uint8Array aufgelöst wird.

Tabelle : 9. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 10. Ergebnisse

Typ	Beschreibung
Objekt	Ein Promise, das mit einem Uint8Array aufgelöst wird.

Tabelle : 11. Ausnahmen

Ausnahme	Beschreibung
DOMException: AbortError	Die Anforderung wurde abgebrochen.
TypeFehler	Wird aus einem der folgenden Gründe ausgelöst: Der Antworttext ist unterbrochen oder gesperrt. Beim Decodieren des Textinhalts ist ein Fehler aufgetreten (z. B. weil der Content-Encoding-Header falsch ist).
Bereichsfehler	Beim Erstellen des zugeordneten ArrayBufferist ein Problem aufgetreten. Zum Beispiel, wenn die Daten zu groß sind.

Das folgende Beispiel zeigt, wie Sie eine Textdatei abrufen, den Textkörper als Uint8Array zurückgeben und ihn dann in eine Zeichenfolge decodieren.

const response = await fetch("https://www.example.com/textfile.txt");
const textFile = await response.bytes();
const string = new TextDecoder().decode(textFile);
console.log(string);

Antwort abrufen – formData()

Gibt eine Zusage zurück, die mit einem FormData-Objekt aufgelöst wird.

Tabelle : 12. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 13. Ergebnisse

Typ	Beschreibung
Objekt	Ein Prompt, das mit einem FormData- Objekt aufgelöst wird.

Tabelle : 14. Ausnahmen

Ausnahme	Beschreibung
DOMException: AbortError	Die Anforderung wurde abgebrochen.
TypeFehler	Wird aus einem der folgenden Gründe ausgelöst: Der Antworttext ist unterbrochen oder gesperrt. Beim Decodieren des Textinhalts ist ein Fehler aufgetreten (z. B. weil der Content-Encoding-Header falsch ist).

Im folgenden Beispiel wird veranschaulicht, wie formData() zum Verarbeiten einer Antwort auf die Formularübermittlung wie folgt verwendet wird:

1. Anforderungstext: JSON.stringify() verwendet, um die Formulardaten als JSON anstelle von URL-codierten Parametern zu senden.
2. Inhaltstyp: Auf „application/json“ festlegen, um das Format des Anforderungstexts anzugeben.

// Example of using Response.formData()
async function fetchFormData(url) {
  try {
    // Make a POST request to fetch the form data
    const response = await fetch(url, {
      method: 'POST',
      body: JSON.stringify({
        name: 'John Doe',
        email: '[e-mail]',
      }),
      headers: {
        'Content-Type': 'application/json',
      },
    });

    // Check if the response is successful
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // Parse the response as FormData
    const formData = await response.formData();

    // Iterate through the FormData entries
    for (const [key, value] of formData.entries()) {
      console.log(`${key}: ${value}`);
    }
  } catch (error) {
    console.error("Error fetching or processing form data:", error);
  }
}

// Example usage
const formEndpoint = 'https://httpbin.org/post'; // Replace with your form endpoint
fetchFormData(formEndpoint);

Ausgabe:

name: John Doe
email: [e-mail]

Antwort abrufen – json()

Gibt ein Prompt zurück, das in das Ergebnis der Analyse des Textkörpers als JSON aufgelöst wird.

Hinweis:

Ungeachtet des Namens dieser Methode ist das Ergebnis von json() kein JSON-Objekt, sondern das Ergebnis der Verwendung von JSON als Eingabe und der Analyse zur Erstellung eines JavaScript-Objekts.

Tabelle : 15. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 16. Ergebnisse

Typ	Beschreibung
Objekt	Ein Prompt, das in ein JavaScript-Objekt aufgelöst wird. Dieses Objekt kann alles sein, was von JSON dargestellt werden kann, z. B. ein Objekt, ein Array, eine Zeichenfolge, eine Zahl usw.

Tabelle : 17. Ausnahmen

Ausnahme	Beschreibung
DOMException: AbortError	Die Anforderung wurde abgebrochen.
TypeFehler	Wird aus einem der folgenden Gründe ausgelöst: Der Antworttext ist unterbrochen oder gesperrt. Beim Decodieren des Textinhalts ist ein Fehler aufgetreten (z. B. weil der Content-Encoding-Header falsch ist).
Syntaxfehler	Der Antworttext kann nicht als JSON analysiert werden.

Das folgende Beispiel zeigt, wie json() zum Bilden einer Antwort verwendet wird:

1. fetch() sendet eine GET-Anforderung an die URL.
2. response.ok prüft, ob die Anforderung erfolgreich war (Statuscode 200–299).
3. Bei Erfolg wird response.json() aufgerufen, um die JSON-Daten aus der Antwort zu analysieren.
4. Die analysierten Daten werden mithilfe der Konsolen -API in Systemprotokollen protokolliert. Wenn während der Anforderung oder Analyse ein Fehler auftritt, wird er erfasst und protokolliert.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

Antwort abrufen – text()

Liest den Antworttext und gibt ihn als einfache Zeichenfolge zurück. Die Antwort wird immer mit UTF-8 decodiert.

Die text() -Methode ist nützlich für Antworten, die Textdaten wie HTML, JSON (bei manueller Bearbeitung), XML oder Nur-Text-Dateien enthalten, die als einfache Zeichenfolgen behandelt werden sollen.

Tabelle : 18. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 19. Ergebnisse

Typ	Beschreibung
Keine	Ein Prompt, das mit einer UTF-8-codierten Zeichenfolge aufgelöst wird.

Tabelle : 20. Ausnahmen

Ausnahme	Beschreibung
DOMException: AbortError	Die Anforderung wurde abgebrochen.
TypeFehler	Wird aus einem der folgenden Gründe ausgelöst: Der Antworttext ist unterbrochen oder gesperrt. Beim Decodieren des Textinhalts ist ein Fehler aufgetreten (z. B. weil der Content-Encoding-Header falsch ist).

Das folgende Beispiel zeigt eine einfache Möglichkeit, text() zu verwenden, wenn der Server Nur-Text zurückgibt, z. B. Hello, World! Dies ist eine Beispielantwort.

const response = awaitfetch('https://example.com/text-endpoint');
const text = await response.text();
console.log(text); // Outputs: Hello, world! This is a sample response.

Ausgabe:

Hello, world! This is a sample response.