Body

Fetch API の Body ミックスインは、リクエスト/レスポンスのボディを表し、そのコンテンツタイプが何であるかとその処理方法を宣言できます。

Body は Request と Response の両方で実装されます。 これにより、これらのオブジェクトに、関連するボディ（ストリーム）と使用済みフラグ（初期は未設定）、MIME タイプ（初期は空のバイトシーケンス）が提供されます。（訳注：コンテンツタイプ（MIME タイプ）は、Headers の "Content-Type" にあります。 でも、例を見てもわかる通り、普通はリクエストの時点で決定しているので、これを調べてはいません。）

プロパティ

Body.body 読取専用

ボディコンテンツの ReadableStream を公開するために使用する単純なゲッター。

Body.bodyUsed 読取専用

既にボディが読み込まれたかどうかを示す Boolean 値。

メソッド

Body.arrayBuffer()

Response ストリームを取得し、完全に読み込む。 ArrayBuffer で解決する promise を返す。

Body.blob()

Response ストリームを取得し、完全に読み込む。 Blob で解決する promise を返す。

Body.formData()

Response ストリームを取得し、完全に読み込む。 FormData オブジェクトで解決する promise を返す。

Body.json()

Response ストリームを取得し、完全に読み込む。 ボディのテキストを JSON として解析した結果で解決する promise を返す。

Body.text()

Response ストリームを取得し、完全に読み込む。 USVString（テキスト）で解決する promise を返す。 レスポンスは常に UTF-8 でデコードする。

例

次の例では、単純なフェッチ呼び出しを使用して画像を取得し、<img> タグで表示します。 画像をリクエストしているので、Body.blob() （Response は Body を実装しています）を実行して、レスポンスに正しい MIME タイプを与える必要があることに注意してください。

HTML の内容

<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">

JS の内容

const myImage = document.querySelector('.my-image');
fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
	.then(res => res.blob())
	.then(res => {
		const objectURL = URL.createObjectURL(res);
		myImage.src = objectURL;
});

仕様

ブラウザーの互換性

関連情報

• ServiceWorker API
• HTTP アクセス制御 (CORS)
• HTTP