diff --git a/files/en-us/web/api/response/body/index.md b/files/en-us/web/api/response/body/index.md index b5590df77307cac..3c7fda2a0c6d419 100644 --- a/files/en-us/web/api/response/body/index.md +++ b/files/en-us/web/api/response/body/index.md @@ -14,10 +14,14 @@ The **`body`** read-only property of the {{domxref("Response")}} interface is a A {{domxref("ReadableStream")}}, or else [`null`](/en-US/docs/Web/JavaScript/Reference/Operators/null) for any `Response` object [constructed](/en-US/docs/Web/API/Response/Response) with a null [`body`](/en-US/docs/Web/API/Response/Response#body) property, or for any actual [HTTP response](/en-US/docs/Web/HTTP/Messages#http_responses) that has no [body](/en-US/docs/Web/HTTP/Messages#body_2). +The stream is a [readable byte stream](/en-US/docs/Web/API/Streams_API/Using_readable_byte_streams), which supports zero-copy reading using a {{domxref("ReadableStreamBYOBReader")}}. + > **Note:** Current browsers don't actually conform to the spec requirement to set the `body` property to `null` for responses with no body (for example, responses to [`HEAD`](/en-US/docs/Web/HTTP/Methods/HEAD) requests, or [`204 No Content`](/en-US/docs/Web/HTTP/Status/204) responses). ## Examples +### Copying an image + In our [simple stream pump](https://mdn.github.io/dom-examples/streams/simple-pump/) example we fetch an image, expose the response's stream using `response.body`, create a reader using {{domxref("ReadableStream.getReader()", "ReadableStream.getReader()")}}, then enqueue that stream's chunks into a second, custom readable stream — effectively creating an identical copy of the image. @@ -59,6 +63,22 @@ fetch("./tortoise.png") .catch((err) => console.error(err)); ``` +### Creating a BYOB reader + +In this example we construct a {{domxref("ReadableStreamBYOBReader")}} from the body using {{domxref("ReadableStream.getReader()", "ReadableStream.getReader({mode: 'byob'})")}}. We can then use this reader to implement zero copy transfer of the response data. + +```js +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", +); +``` + ## Specifications {{Specifications}}