The ReadableStream
interface of the Streams API represents a readable stream of byte data. The Fetch API offers a concrete instance of a ReadableStream
through the body
property of a Response
object.
Constructor
ReadableStream()
- Creates and returns a readable stream object from the given handlers.
Properties
ReadableStream.locked
Read only- The
locked
getter returns whether or not the readable stream is locked to a reader.
Methods
ReadableStream.cancel()
- Cancels the stream, signaling a loss of interest in the stream by a consumer. The supplied reason argument will be given to the underlying source, which may or may not use it.
ReadableStream.getIterator()
- Creates a ReadableStream async iterator instance and locks the stream to it. While the stream is locked, no other reader can be acquired until this one is released.
ReadableStream.getReader()
- Creates a reader and locks the stream to it. While the stream is locked, no other reader can be acquired until this one is released.
ReadableStream.pipeThrough()
- Provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair.
ReadableStream.pipeTo()
- Pipes the current ReadableStream to a given
WritableStream
and returns a promise that fulfills when the piping process completes successfully, or rejects if any errors were encountered. ReadableStream.tee()
- The
tee
method tees this readable stream, returning a two-element array containing the two resulting branches as newReadableStream
instances. Each of those streams receives the same incoming data. ReadableStream[@@asyncIterator]()
- Alias of
getIterator
method.
Examples
In the following example, an artificial Response
is created to stream HTML fragments fetched from another resource to the browser.
It demonstrates the usage of a ReadableStream
in combination with a Uint8Array
.
fetch("https://www.example.org/").then((response) => { const reader = response.body.getReader(); const stream = new ReadableStream({ start(controller) { // The following function handles each data chunk function push() { // "done" is a Boolean and value a "Uint8Array" reader.read().then(({ done, value }) => { // Is there no more data to read? if (done) { // Tell the browser that we have finished sending data controller.close(); return; } // Get the data and send it to the browser via the controller controller.enqueue(value); push(); }); }; push(); } }); return new Response(stream, { headers: { "Content-Type": "text/html" } }); });
Specifications
Specification | Status | Comment |
---|---|---|
Streams The definition of 'ReadableStream' in that specification. |
Living Standard | Initial definition |
Browser compatibility
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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ReadableStream | Chrome Full support 43 | Edge Full support 14 | Firefox
Full support
65
| IE No support No | Opera Full support 30 | Safari Full support 10.1 | WebView Android Full support 43 | Chrome Android Full support 43 | Firefox Android
Full support
65
| Opera Android Full support 30 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 4.0 |
ReadableStream() constructor | Chrome Full support 43 | Edge Full support 79 | Firefox
Full support
65
| IE No support No | Opera Full support 30 | Safari Full support 10.1 | WebView Android Full support 43 | Chrome Android Full support 43 | Firefox Android
Full support
65
| Opera Android Full support 30 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 4.0 |
cancel | Chrome Full support 43 | Edge Full support 14 | Firefox
Full support
65
| IE No support No | Opera Full support 30 | Safari Full support 10.1 | WebView Android Full support 43 | Chrome Android Full support 43 | Firefox Android
Full support
65
| Opera Android Full support 30 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 4.0 |
getReader | Chrome Full support 43 | Edge Full support 14 | Firefox
Full support
65
| IE No support No | Opera Full support 30 | Safari Full support 10.1 | WebView Android Full support 43 | Chrome Android Full support 43 | Firefox Android
Full support
65
| Opera Android Full support 30 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 4.0 |
locked | Chrome Full support 43 | Edge Full support 14 | Firefox
Full support
65
| IE No support No | Opera Full support 30 | Safari Full support 10.1 | WebView Android Full support 43 | Chrome Android Full support 43 | Firefox Android
Full support
65
| Opera Android Full support 30 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 4.0 |
pipeThrough | Chrome Full support 59 | Edge Full support 79 | Firefox No support No | IE No support No | Opera Full support 46 | Safari Full support 10.1 | WebView Android Full support 59 | Chrome Android Full support 59 | Firefox Android No support No | Opera Android Full support 43 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 7.0 |
pipeTo | Chrome Full support 59 | Edge Full support 79 | Firefox No support No | IE No support No | Opera Full support 46 | Safari Full support 10.1 | WebView Android Full support 59 | Chrome Android Full support 59 | Firefox Android No support No | Opera Android Full support 43 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 7.0 |
tee | Chrome Full support 43 | Edge Full support 79 | Firefox
Full support
65
| IE No support No | Opera Full support 30 | Safari Full support 10.1 | WebView Android Full support 43 | Chrome Android Full support 43 | Firefox Android
Full support
65
| Opera Android Full support 30 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 4.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
See Also
- WHATWG Stream Visualiser, for a basic visualisation of readable, writable, and transform streams.