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, holen wir ein Bild und weisen das zurückgegebene Versprechen einer Variablen responsePromise zu.

Wenn der Benutzer "Use response" klickt, überprüfen wir, ob die Antwort bereits verwendet wurde. Falls ja, geben wir eine Meldung aus. Falls nicht, lesen wir den Antwort-Body 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

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

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

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