Response: bodyUsed-Eigenschaft

Ein boolescher Wert.

Dieses Beispiel zeigt, dass das Lesen des Bodys einer Antwort den Wert von bodyUsed von false auf true ändert.

Das Beispiel enthält ein leeres Bild.

Wenn das JavaScript des Beispiels ausgeführt wird, laden wir ein Bild und weisen das zurückgegebene Versprechen einer Variablen responsePromise zu.

Wenn der Benutzer auf "Use response" klickt, überprüfen wir, ob die Antwort bereits verwendet wurde. Wenn ja, drucken wir eine Nachricht aus. Wenn nicht, lesen wir den Body der Antwort und verwenden ihn, um einen Wert für das src-Attribut des Bildes bereitzustellen.

HTML

<button id="use">Use response</button>
<button id="reset">Reset</button>
<br />
<img id="my-image" src="" />
<pre id="log"></pre>

JavaScript

const useResponse = document.querySelector("#use");
const reset = document.querySelector("#reset");
const myImage = document.querySelector("#my-image");
const log = document.querySelector("#log");

const responsePromise = fetch(
  "https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg",
);

useResponse.addEventListener("click", async () => {
  const response = await responsePromise;
  if (response.bodyUsed) {
    log.textContent = "Body has already been used!";
  } else {
    const result = await response.blob();
    const objectURL = URL.createObjectURL(result);
    myImage.src = objectURL;
  }
});

reset.addEventListener("click", () => {
  document.location.reload();
});

Ergebnis

Anfangs gibt es keinen Wert für das Bild. Wenn Sie einmal auf "Use response" klicken, ist bodyUsed false, also lesen wir die Antwort und setzen das Bild. Wenn Sie dann erneut auf "Use response" klicken, ist bodyUsed true, und wir drucken die Nachricht.

Klicken Sie auf "Reset", um das Beispiel neu zu laden, damit Sie es erneut versuchen können.

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