--- title: Response.blob() slug: Web/API/Response/blob tags: - API - Blob - Fetch - Method - Reference - Response browser-compat: api.Response.blob translation_of: Web/API/Response/blob original_slug: Web/API/Body/blob ---
{{APIRef("Fetch")}}

blob() は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} ストリームを取得して完全に読み込みます。 {{domxref("Blob")}} で解決するプロミスを返します。

構文

response.blob().then(function(myBlob) {
  // do something with myBlob
});

引数

なし。

注: {{domxref("Response")}} の {{domxref("Response.type")}} が "opaque" の場合、結果の {{domxref("Blob")}} の {{domxref("Blob.size")}} は 0、{{domxref("Blob.type")}} は空文字列 "" になり、{{domxref("URL.createObjectURL")}} のようなメソッドでは役に立たなくなります。

返値

{{domxref("Blob")}} で解決するプロミスです。

例

fetch request の例 (fetch request をライブで実行) では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG を読み取ります。読み取りが成功したら、blob() を使用してレスポンスから {{domxref("Blob")}} を読み取り、それを {{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に入れ、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。

var myImage = document.querySelector('img');

var myRequest = new Request('flowers.jpg');

fetch(myRequest)
.then(response => response.blob())
.then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報