Ответ: свойство body
Базовая Широко доступная *
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2017 года.
* Некоторые части этой функции могут иметь различный уровень поддержки.
Примечание: Эта функция доступна в Web Workers.
Свойство body только для чтения интерфейса Response представляет собой ReadableStream содержимого тела.
Значение
A ReadableStream, или же null для любого Response объекта, созданного со свойством body, равным null, или для любого фактического HTTP ответа, у которого нет тела.
Поток является потоком байтов для чтения, который поддерживает чтение без копирования с помощью ReadableStreamBYOBReader.
Примечание: Текущие браузеры фактически не соответствуют требованиям спецификации, которые предполагают установить свойство body в значение null для ответов без тела (например, ответы на запросы HEAD или ответы со статусом 204 No Content).
Примеры
Копирование изображения
В нашем примере простого насоса потоков мы получаем изображение, используем response.body для доступа к потоку ответа, создаем ридер с помощью ReadableStream.getReader(), а затем добавляем блоки потока в другой, пользовательский поток для чтения — создавая точную копию изображения.
const image = document.getElementById("target");
// Fetch the original image
fetch("./tortoise.png")
// Retrieve its body as ReadableStream
.then((response) => response.body)
.then((body) => {
const reader = body.getReader();
return new ReadableStream({
start(controller) {
return pump();
function pump() {
return reader.read().then(({ done, value }) => {
// When no more data needs to be consumed, close the stream
if (done) {
controller.close();
return;
}
// Enqueue the next data chunk into our target stream
controller.enqueue(value);
return pump();
});
}
},
});
})
.then((stream) => new Response(stream))
.then((response) => response.blob())
.then((blob) => URL.createObjectURL(blob))
.then((url) => console.log((image.src = url)))
.catch((err) => console.error(err));
Создание ридера BYOB
В этом примере мы создаём ReadableStreamBYOBReader из тела с помощью ReadableStream.getReader({mode: 'byob'}). Затем мы можем использовать этот ридер для реализации передачи данных ответа без копирования.
async function getProducts(url) {
const response = await fetch(url);
const reader = response.body.getReader({ mode: "byob" });
// read the response
}
getProducts(
"https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);
Спецификации
| Спецификация |
|---|
| Fetch # ref-for-dom-body-body① |
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
body |
43 | 14 | 65 | 30 | 10.1 | 43 | 65 | 30 | 10.3 | 4.0 | 43 |
readable_byte_stream |
116 | 116 | 102 | 102 | Нет | 116 | 102 | 78 | Нет | 24.0 | 116 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Response/body