Response: bodyUsed プロパティ

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.

bodyUsedResponse インターフェイスの読み取り専用プロパティで、本体が読み取り済みであるかどうかを示す論理値です。

論理値です。

bodyUsed のチェック

この例は、レスポンスの本体を読み込むと bodyUsed の値が false から true に変わることを示しています。

この例には、空の画像があります。

この例の JavaScript を実行すると、画像を取得し、返されたプロミスを変数 responsePromise に代入します。

ユーザーが「レスポンスを使用する」をクリックすると、レスポンスがすでに使用されているかどうかを調べます。もし指定されていたら、メッセージを出力します。もしまだ使用されていなければ、レスポンス本体を読み込み、それを用いて画像の src 属性の値を提供します。

HTML

html
<button id="use">レスポンスを使用する</button>
<button id="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();
});

結果

初期状態では画像の値はありません。「レスポンスを使用する」を一度クリックすると、bodyUsedfalse になるので、レスポンスを読み込んで画像を設定します。もう一度「レスポンスを使用する」をクリックすると、bodyUsedtrue となり、メッセージを出力します。

「リセット」をクリックすると、例が再読み込みされますので、もう一度試してみてください。

仕様書

Specification
Fetch
# ref-for-dom-body-bodyused①

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
bodyUsed

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報