Antwort Abrufen – Umfang, Global

Die Antwort Abrufen Die API bietet Methoden zum Erstellen eines neuen Antwortobjekts und zur Verarbeitung des von einem erstellten Antworttexts Anforderung Abrufen API-Methode.

Die Antwort Abrufen API ist Teil eines Satzes von Abrufen APIs, die verschiedene Aktionen zum Abrufen von Ressourcen von externen Websites bereitstellen. Der vollständige Abrufen Die API-Sammlung umfasst:

• Abrufen – Abrufen (Zeichenfolgenressource, Objektoptionen): Startet den Prozess des Abrufs einer Ressource aus dem Netzwerk.
• Header Abrufen – Umfang, Global: Anforderungs- und Antwortheader abrufen und ändern.
• Anforderung Abrufen – Umfang, Global: Erstellen Sie ein neues Anforderungsobjekt.
• Rufen Sie „RequestInit“ ab – Umfang, Global: Legen Sie Optionen zum Konfigurieren einer Abrufanforderung fest.
• Antwort Abrufen – Umfang, Global: Erstellen Sie ein neues Antwortobjekt.

Zur Unterstützung von Abrufaktionen die Systemeigenschaft Glide.Hosts.Zulässigkeitsliste , Ermöglicht Steuerungen darüber, auf welche Hosts eine Abrufmethode zugreifen kann. Gilt für HTTP-APIs wie RestMessageV2 Und die oben genannten. Weitere Informationen zu finden Glide.Hosts.Zulässigkeitsliste , Siehe Available system properties.

Antworteigenschaften

Die Antwort Die API stellt Eigenschaften bereit, die Details zur HTTP-Antwort zurückgeben. Mit diesen Eigenschaften können Sie auf Metadaten zugreifen (z. B. Status , Header , Typ ) Und der Antworttext ( Textkörper ) Zur weiteren Verarbeitung. Sie ermöglichen die Überprüfung des Erfolgs einer Anforderung ( ok ) Und 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. Weitere ausführliche 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	Nur bereit. Enthält einen lesbaren Stream von Byte-Daten im Inhalt des Antworttexts. Gültige Werte: Ein ReadableStream oder null. Datentyp: Zeichenfolge	const request = new Request("/myEndpoint", { method: "POST", body: "Hello world", }); request.body; // ReadableStream
Körperverwendet	Nur bereit. Kennzeichnung, die angibt, ob der Text noch gelesen wurde. Akzeptierte Werte: Wahr: Textkörper wurde gelesen. Falsch: 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 Headerobjekt, das der Antwort zugeordnet ist. Datentyp: Header-Objekt	const myRequest = new Request("flowers.jpg"); const myHeaders = myRequest.headers; // Headers {}
Okay	Nur bereit. Kennzeichnung, die angibt, ob die Antwort erfolgreich war (Status im Bereich 200–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 weitergeleitet. Datentyp: Boolesch	const myRequest = new Request("flowers.jpg"); const myCred = myRequest.redirect;
status	Schreibgeschützt. HTTP-Statuscodes der Antwort. Beispiel: 200 für einen 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. Dies wäre zum Beispiel OK Für einen Statuscode 200 , Fahren Sie Fort 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); } }
type	Schreibgeschützt. Typ der Antwort. Akzeptierte Werte: Standard: Normale, gleiche Ursprungsantwort, mit allen Headern außer „Set-Cookie“ verfügbar. cors: Antwort wurde von einer gültigen ursprungsübergreifenden Anforderung empfangen. Auf bestimmte Header und den Text kann zugegriffen werden. 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änderbar. Dies ist der Typ für eine Antwort, die von erhalten wurde Antwort.Fehler() . Undurchsichtig: Antwort auf Anforderung „no-cors“ an ursprungsübergreifende Ressource. Stark eingeschränkt. Opaqueredirect: Die Abrufanforderung wurde mit gestellt Umleiten: „Manuell“ . Der Status der Antwort ist 0, Header sind leer, Textkörper ist null und Trailer 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 Antwort () Konstruktor.

Tabelle : 2. Parameter

Name	Typ	Beschreibung
body	Objekt	Optional. Ein Objekt, das einen Textkörper für die Antwort definiert. Gültige Typen: ArrayBuffer Blob Datenansicht FormData Schreibbarer Stream Zeichenfolge Zeichenfolgenliteral TypedArray URLSearchParams Standard: Null
Optionen	Objekt	Optional. Ein Optionsobjekt, das alle anwenderdefinierten Einstellungen enthält, die Sie auf die Antwort anwenden möchten, oder ein leeres Objekt (das der Standardwert ist). Die möglichen Optionen lauten: Header: Alle Header, die Sie Ihrer Antwort hinzufügen möchten, enthalten in Header Abrufen – Umfang, Global Objekt- oder Objektliteral von Zeichenfolgenschlüssel/Wert-Paaren (siehe HTTP-Header Für eine Referenz). 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 ein neues Antwortobjekt mit dem Konstruktor, übergeben einen neuen Blob als Textkörper und ein init-Objekt mit anwenderdefinierten Status- und statusTextoptionen:

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 gelöst wird.

Die ArrayBuffer() Die Methode 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 gelöst wird ArrayBuffer , Der einen generischen binären Rohdatenpuffer darstellt.

Tabelle : 5. Ausnahmen

Ausnahme	Beschreibung
DOMException: Abbruchfehler	Eine Ausnahme, die angibt, dass die Anforderung abgebrochen wurde.
TypeError	Wird aus einem der folgenden Gründe ausgelöst: Der Antworttext ist gestört oder gesperrt. Beim Decodieren des Textinhalts ist ein Fehler aufgetreten (z. B. da der Header „Inhaltscodierung“ falsch ist).
Bereichsfehler	Beim Erstellen des zugeordneten ist ein Problem aufgetreten ArrayBuffer . Beispiel: Wenn die Datengröße zu groß ist.

Das folgende Beispielskript ruft Binärdaten von einem Server ab und verarbeitet sie bei Verwendung von ArrayBuffer() Methode mit diesen Schritten:

1. Abrufen () : Ruft eine Ressource aus der angegebenen URL ab.
2. response.ok: Überprüft, ob der Antwortstatus im Bereich 200-299 liegt.
3. ArrayBuffer() : Liest den Antworttext und konvertiert ihn in einen ArrayBuffer, der einen generischen binären Rohdatenpuffer 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 gelöst wird.

Tabelle : 6. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 7. Ergebnisse

Typ	Beschreibung
Objekt	Ein Versprechen, das mit gelöst wird Blob .

Tabelle : 8. Ausnahmen

Ausnahme	Beschreibung
DOMException: Abbruchfehler	Eine Ausnahme, die angibt, dass die Anforderung abgebrochen wurde.
TypeError	Wird aus einem der folgenden Gründe ausgelöst: Der Antworttext ist gestört oder gesperrt. Beim Decodieren des Textinhalts ist ein Fehler aufgetreten (z. B. da der Header „Inhaltscodierung“ falsch ist).

Das folgende Beispiel zeigt die Verwendung von blob() Methode mit Abrufen API mit den folgenden Schritten. Dieser Anwendungsfall eignet sich hervorragend, um Bilder oder andere binäre Inhalte (z. B. Videos oder PDFs) abzurufen und dynamisch anzuzeigen.

1. Abrufen (url) : Ruft eine Ressource aus der angegebenen URL ab.
2. Antwort.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. Das Bild an das DOM anhängen: Erstellt dynamisch ein Bildelement, 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 gelöst wird.

Tabelle : 9. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 10. Ergebnisse

Typ	Beschreibung
Objekt	Eine Zusage, die mit einem Uint8Array gelöst wird.

Tabelle : 11. Ausnahmen

Ausnahme	Beschreibung
DOMException: Abbruchfehler	Die Anforderung wurde abgebrochen.
TypeError	Wird aus einem der folgenden Gründe ausgelöst: Der Antworttext ist gestört oder gesperrt. Beim Decodieren des Textinhalts ist ein Fehler aufgetreten (z. B. da der Header „Inhaltscodierung“ falsch ist).
Bereichsfehler	Beim Erstellen des zugeordneten ist ein Problem aufgetreten ArrayBuffer . Beispiel: Wenn die Datengröße zu groß ist.

Das folgende Beispiel zeigt, wie Sie eine Textdatei abrufen, den Textkörper als Uint8Array zurückgeben und diese 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 gelöst wird.

Tabelle : 12. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 13. Ergebnisse

Typ	Beschreibung
Objekt	Ein Versprechen, das mit gelöst wird Formulardaten Objekt.

Tabelle : 14. Ausnahmen

Ausnahme	Beschreibung
DOMException: Abbruchfehler	Die Anforderung wurde abgebrochen.
TypeError	Wird aus einem der folgenden Gründe ausgelöst: Der Antworttext ist gestört oder gesperrt. Beim Decodieren des Textinhalts ist ein Fehler aufgetreten (z. B. da der Header „Inhaltscodierung“ falsch ist).

Das folgende Beispiel zeigt die Verwendung Formulardaten() So verarbeiten Sie eine Formularübermittlungsantwort mit den folgenden Schritten:

1. Anforderungstext: Verwendet JSON.stringify() Zum Senden der Formulardaten als JSON anstelle von URL-codierten Parametern.
2. Inhaltstyp: Auf festgelegt Anwendung/JSON 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 eine Zusage zurück, die das Ergebnis der Analyse des Textkörpers als JSON ergibt.

Hinweis:

Trotz des Namens dieser Methode, das Ergebnis von json() Ist nicht JSON, sondern das Ergebnis, dass JSON als Eingabe verwendet und analysiert wird, um ein JavaScript-Objekt zu erstellen.

Tabelle : 15. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 16. Ergebnisse

Typ	Beschreibung
Objekt	Eine Zusage, die 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, und so weiter.

Tabelle : 17. Ausnahmen

Ausnahme	Beschreibung
DOMException: Abbruchfehler	Die Anforderung wurde abgebrochen.
TypeError	Wird aus einem der folgenden Gründe ausgelöst: Der Antworttext ist gestört oder gesperrt. Beim Decodieren des Textinhalts ist ein Fehler aufgetreten (z. B. da der Header „Inhaltscodierung“ falsch ist).
SyntaxError	Der Antworttext kann nicht als JSON analysiert werden.

Das folgende Beispiel zeigt die Verwendung json() So erstellen Sie eine Antwort:

1. Abrufen () Stellt eine GET-Anforderung an die URL.
2. Die response.okÜberprüft, ob die Anforderung erfolgreich war (Statuscode 200–299).
3. Wenn erfolgreich, Antwort.JSON() Wird aufgerufen, um die JSON-Daten aus der Antwort zu analysieren.
4. Die analysierten Daten werden mithilfe von in Systemprotokollen protokolliert Konsole API. 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() Die Methode ist nützlich für Antworten, die Textdaten enthalten, z. B. HTML, JSON (wenn Sie sie manuell verarbeiten möchten), XML oder nur-Text-Dateien, die als nur-Zeichenfolgen behandelt werden sollen.

Tabelle : 18. Parameter

Name	Typ	Beschreibung
Keine

Tabelle : 19. Ergebnisse

Typ	Beschreibung
Keine	Eine Zusage, die mit einer UTF-8-konformen Zeichenfolge aufgelöst wird.

Tabelle : 20. Ausnahmen

Ausnahme	Beschreibung
DOMException: Abbruchfehler	Die Anforderung wurde abgebrochen.
TypeError	Wird aus einem der folgenden Gründe ausgelöst: Der Antworttext ist gestört oder gesperrt. Beim Decodieren des Textinhalts ist ein Fehler aufgetreten (z. B. da der Header „Inhaltscodierung“ falsch ist).

Das folgende Beispiel zeigt, wie eine einfache Methode zu verwenden ist Text() Wenn der Server nur-Text zurückgibt, z. B. Hallo Welt! 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.