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()

引数

なし。

メモ: ResponseResponse.type"opaque" の場合、結果の BlobBlob.size0Blob.type は空文字列 "" になり、URL.createObjectURL() のようなメソッドでは役に立たなくなります。

返値

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

例外

DOMException AbortError

リクエストが中止された場合。

TypeError

以下のいずれかの原因で発生します。

  • レスポンス本体が妨害またはロックされている場合。
  • 本体コンテンツをデコードする際にエラーが発生した場合(例えば、Content-Encoding ヘッダーが不正な場合など)。

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

関連情報