Fetch API：Body接口

Fetch API的Body mixin表示響應(yīng)/請求的主體，允許你聲明一下它的內(nèi)容類型以及它應(yīng)該如何處理。

Body是通過Request和Response來實現(xiàn)的。這為這些對象提供了一個關(guān)聯(lián)的主體（一個流），一個使用的標(biāo)志（最初未設(shè)置）和一個MIME類型（最初是空字節(jié)序列）。

Body接口屬性

Body.body（只讀）

一個簡單的getter用來發(fā)現(xiàn)正文內(nèi)容的ReadableStream。

Body.bodyUsed（只讀）

一個Boolean表明是否已經(jīng)閱讀主體的內(nèi)容。

Body接口方法

Body.arrayBuffer()

采取一個Response流，并將其讀入完成。它返回一個承諾，使用一個ArrayBuffer解決。

Body.blob()

采取一個Response流，并將其讀入完成。它返回一個承諾，使用一個Blob解決。

Body.formData()

采取一個Response流，并將其讀入完成。它返回一個承諾，使用一個FormData對象解決。

Body.json()

采取一個Response流，并將其讀入完成。它返回一個承諾，使用JSON對象解決。

Body.text()

采取一個Response流，并將其讀入完成。它返回一個用USVString（文本）來解決的承諾。響應(yīng)總是使用UTF-8進行解碼。

例子

下面的示例使用簡單的 fetch 調(diào)用來獲取圖像并將其顯示在<img>標(biāo)記中。你會注意到，因為我們正在請求一個圖像，所以我們需要運行Body.blob()（Response實體）來為響應(yīng)提供正確的MIME類型。

HTML內(nèi)容

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

JS內(nèi)容

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;
});

規(guī)范

瀏覽器兼容性

• 電腦端

• 移動端

上表中的標(biāo)注解釋：

[1]從第34版開始優(yōu)先。

[2]可讀流當(dāng)前在Firefox中啟用，但隱藏在dom.streams.enabled和javascript.options.streamsprefs后面。