Response: blob() method
{{APIRef("Fetch API")}}{{AvailableInWorkers}}
The blob() method of the {{domxref("Response")}}Response interface takes
a {{domxref("Response")}}Response stream and reads it to completion. It returns a promise that
resolves with a {{domxref("Blob")}}Blob.
Syntax
blob()
Parameters
None.
[!NOTE]NOTE: If the{{domxref("Response")}}Response has a{{domxref("Response.type")}}type of"opaque", the resulting{{domxref("Blob")}}Blob will have a{{domxref("Blob.size")}}size of0and a{{domxref("Blob.type")}}type of empty string"", which renders it useless for methods like{{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}}.
Return value
A promise that resolves with a {{domxref("Blob")}}Blob whose data is the body's bytes and the media type is the response's Content-Type header's value.
Exceptions
AbortError{{domxref("DOMException")}}DOMException- : The request was aborted.
{{jsxref("TypeError")}}TypeError- : Thrown for one of the following reasons:
- The response body is disturbed or locked.
- There was an error decoding the body content (for example, because the
{{httpheader("Content-Encoding")}}Encoding header is incorrect).
- : Thrown for one of the following reasons:
Examples
In our fetch request example (run fetch request live), we
create a new request using the {{domxref("Request.Request","Request()")}} constructor,
then use it to fetch a JPG. When the fetch is successful, we read a {{domxref("Blob")}}Blob
out of the response using blob(), put it into an object URL using
{{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}}, and then set that URL as the source of an
{{htmlelement("img")}}img element to display the image.
const myImage = document.querySelector("img");
const myRequest = new Request("flowers.jpg");
fetch(myRequest)
.then((response) => response.blob())
.then((myBlob) => {
const objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
Specifications
{{Specifications}}
Browser compatibility
{{Compat}}