Compatibility layer for efficient streaming of binary data using WHATWG Streams
Switch branches/tags
Nothing to show
Clone or download
Jonny Reeves
Jonny Reeves Fix release script
Latest commit 7369920 Nov 8, 2018


Compatibility layer for efficient streaming of binary data using WHATWG Streams


This library provides a consistent, cross browser API for streaming a response from an HTTP server based on the WHATWG Streams specification. At the time of writing, Chrome is the only browser to nativley support returning a ReadableStream from it's fetch implementation - all other browsers need to fall back to XMLHttpRequest.

FireFox does provide the ability to efficiently retrieve a byte-stream from a server; however only via it's XMLHttpRequest implementation (when using responsetype=moz-chunked-arraybuffer). Other browsers do not provide access to the underlying byte-stream and must therefore fall-back to concatenating the response string and then encoding it into it's UTF-8 byte representation using the TextEncoder API.

Nb: If you are happy using a node-style API (using callbacks and events) I would suggest taking a look at stream-http.


This package can be installed with npm:

$ npm install fetch-readablestream --save

Once installed you can import it directly:

import fetchStream from 'fetch-readablestream';

Or you can add a script tag pointing to the dist/fetch-readablestream.js bundle and use the fetchStream global:

<script src="./node_modules/fetch-readablestream/dist/fetch-readablestream.js"></script>


The fetchStream api provides a subset of the fetch API; in particular, the ability to get a ReadableStream back from the Response object which can be used to efficiently stream a chunked-transfer encoded response from the server.

function readAllChunks(readableStream) {
  const reader = readableStream.getReader();
  const chunks = [];

  function pump() {
    return{ value, done }) => {
      if (done) {
        return chunks;
      return pump();

  return pump();

  .then(response => readAllChunks(response.body))
  .then(chunks => console.dir(chunks))

AbortController is supported in many environments, and allows you to abort ongoing requests. This is fully supported in any environment that supports both ReadableStreams & AbortController directly (e.g. Chrome 66+), and has basic support in most other environments, though you may need a polyfill in your own code to use it. To abort a request:

const controller = new AbortController();

fetchStream('/endpoint', {
  signal: controller.signal
}).then(() => {
  // ...

// To abort the ongoing request:

Browser Compatibility

fetch-readablestream makes the following assumptions on the environment; legacy browsers will need to provide Polyfills for this functionality:

Feature Browsers Polyfill
ReadableStream Firefox, Safari, IE11, PhantomJS web-streams-polyfill
TextEncoder Safari, IE11, PhantomJS text-encoding
Promise, Symbol, Object.assign IE11, PhantomJS babel-polyfill


Use npm run watch to fire up karma with live-reloading. Visit http://localhost:9876/ in a bunch of browsers to capture them - the test suite will run automatically and report any failures.