Response: bodyUsed property
The bodyUsed
read-only property of the Response
interface is a boolean value that indicates whether the body has been read yet.
Value
A boolean value.
Examples
Checking bodyUsed
This example illustrates that reading the body of a response changes the value of bodyUsed
from false
to true
.
The example contains an empty image.
When the example's JavaScript runs, we fetch an image and assigns the returned promise to a variable responsePromise
.
When the user clicks "Use response", we check whether the response has been used already. If it has, we print a message. If it has not, we read the response body and used it to provide a value for the image's src
attribute.
HTML
html
<button id="use">Use response</button>
<button id="reset">Reset</button>
<br />
<img id="my-image" src="" />
<pre id="log"></pre>
JavaScript
js
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();
});
Result
Initially there is no value for the image. If you click "Use response" once, then bodyUsed
is false
, so we read the response and set the image. If you then click "Use response" again, then bodyUsed
is true
, and we print the message.
Click "Reset" to reload the example, so you can try again.
Specifications
Specification |
---|
Fetch Standard # ref-for-dom-body-bodyused① |
Browser compatibility
BCD tables only load in the browser