Body

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

BodyRequestResponse の両方で実装されます。 これにより、これらのオブジェクトに、関連するボディ(ストリーム)と使用済みフラグ(初期は未設定)、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()ResponseBody を実装しています)を実行して、レスポンスに正しい 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;
});

仕様

仕様 状態 コメント
Fetch
Body の定義
現行の標準

ブラウザーの互換性

BCD tables only load in the browser

関連情報