Response.blob()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

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

構文

js
blob()

引数

なし。

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

返値

Blob で解決するプロミスです。

例

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

js
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;
  });

仕様書

Specification
Fetch Standard
# ref-for-dom-body-blob①

ブラウザーの互換性

BCD tables only load in the browser

関連情報