We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Fetch APIBody mixin は、コンテンツタイプの種類や扱われ方を決める、リクエスト/レスポンスのボディを表します。

BodyRequestResponse の両方に実装されていて、bodystream)と使用済みフラグ(初期は未設定)、MIMEタイプ(初期は空のバイトシーケンス)を提供します。

プロパティ

Body.body 読取専用
A simple getter used to expose a ReadableStream of the body contents.
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を使用します。

basic fetch exampleexample ライブを実行)では、画像を取得して <img> タグに表示するために fetch 呼び出しを使用しています。画像をリクエストするので、正しい MIME type をレスポンスに設定するために Body.blobResponse は body を実装しています)を実行する必要があることに注意してください。

HTML Content

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

JS Content

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

仕様

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

ブラウザ実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

42

411

あり

39

342

なし29 なし
body52 あり なし3 なし39 ?
bodyUsed

42

411

あり

39

342

なし

29

284

なし
arrayBuffer

42

411

あり

39

342

なし

29

284

なし
blob

42

411

あり

39

342

なし

29

284

なし
formData60 ?

39

342

なし47 なし
json

42

411

あり

39

342

なし

29

284

なし
text

42

411

あり

39

342

なし

29

284

なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4242 ? ? あり なし4.0
body5252 ? なし339 ?6.0
bodyUsed なし なし あり なし なし なし なし
arrayBuffer なし なし あり なし なし なし なし
blob なし なし あり なし なし なし なし
formData6060 ? なし47 なし なし
json なし なし あり なし なし なし なし
text なし なし あり なし なし なし なし

1. From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

2. From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.

3. This feature is behind the dom.streams.enabled preference and the javascript.options.streams preference. To change preferences in Firefox, visit about:config.

4. From version 28: this feature is behind the Experimental Web Platform Features preference.

関連項目

 

ドキュメントのタグと貢献者

このページの貢献者: woodmix, hamasaki, chikoski, YuichiNukiyama, fscholz
最終更新者: woodmix,