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 の定義
現行の標準

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
BodyChrome 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ≤18Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 完全対応 10.1WebView Android 完全対応 42Chrome Android 完全対応 42Firefox Android ? Opera Android 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
arrayBuffer
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ≤18Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 完全対応 10.1WebView Android 未対応 なしChrome Android 完全対応 42Firefox Android 未対応 なしOpera Android 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
blob
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ≤18Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 完全対応 10.1WebView Android 未対応 なしChrome Android 完全対応 42Firefox Android 未対応 なしOpera Android 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
body
実験的
Chrome 完全対応 52Edge 完全対応 ≤18Firefox 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 39Safari 完全対応 11.1WebView Android 完全対応 52Chrome Android 完全対応 52Firefox Android 完全対応 65
完全対応 65
完全対応 57
無効
無効 From version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 41Safari iOS 完全対応 11.3Samsung Internet Android 完全対応 6.0
bodyUsed
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ≤18Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 完全対応 10.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 未対応 なし
formData
実験的
Chrome 完全対応 60Edge 完全対応 ≤79Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 47Safari 部分対応 10.1
補足
部分対応 10.1
補足
補足 From Safari 10.1, the method exists but always rejects with NotSupportedError. See bug 215671.
WebView Android 完全対応 60Chrome Android 完全対応 60Firefox Android 未対応 なしOpera Android 完全対応 44Safari iOS 部分対応 10.3
補足
部分対応 10.3
補足
補足 From Safari for iOS 10.3, the method exists but always rejects with NotSupportedError. See bug 215671.
Samsung Internet Android 完全対応 8.0
json
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ≤18Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 完全対応 10.1WebView Android 未対応 なしChrome Android 完全対応 42Firefox Android 未対応 なしOpera Android 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
text
実験的
Chrome 完全対応 42
完全対応 42
完全対応 41
無効
無効 From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ≤18Firefox 完全対応 39
完全対応 39
完全対応 34
無効
無効 From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 完全対応 10.1WebView Android 未対応 なしChrome Android 完全対応 42Firefox Android 未対応 なしOpera Android 完全対応 29
完全対応 29
完全対応 28
無効
無効 From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報