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;
});
仕様
仕様 | 状態 | コメント |
---|---|---|
Fetch Body の定義 |
現行の標準 |
ブラウザーの互換性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.