Skip to content

Instantly share code, notes, and snippets.

@jfsiii
Last active March 30, 2024 01:37
Show Gist options
  • Save jfsiii/034152ecfa908cf66178 to your computer and use it in GitHub Desktop.
Save jfsiii/034152ecfa908cf66178 to your computer and use it in GitHub Desktop.
Quick example of using fetch to parse a chunked response
var chunkedUrl = 'https://jigsaw.w3.org/HTTP/ChunkedScript';
fetch(chunkedUrl)
.then(processChunkedResponse)
.then(onChunkedResponseComplete)
.catch(onChunkedResponseError)
;
function onChunkedResponseComplete(result) {
console.log('all done!', result)
}
function onChunkedResponseError(err) {
console.error(err)
}
function processChunkedResponse(response) {
var text = '';
var reader = response.body.getReader()
var decoder = new TextDecoder();
return readChunk();
function readChunk() {
return reader.read().then(appendChunks);
}
function appendChunks(result) {
var chunk = decoder.decode(result.value || new Uint8Array, {stream: !result.done});
console.log('got chunk of', chunk.length, 'bytes')
text += chunk;
console.log('text so far is', text.length, 'bytes\n');
if (result.done) {
console.log('returning')
return text;
} else {
console.log('recursing')
return readChunk();
}
}
}
got chunk of 32768 bytes
text so far is 32768 bytes
recursing
got chunk of 32768 bytes
text so far is 65536 bytes
recursing
got chunk of 6664 bytes
text so far is 72200 bytes
recursing
got chunk of 0 bytes
text so far is 72200 bytes
returning
all done! This output will be chunked encoded by the server, if your client is HTTP/1.1
<snip>
@jamesward
Copy link

FYI, this doesn't seem to work on Firefox.

@supamanda
Copy link

supamanda commented Sep 28, 2018

According to https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API :

[The Streaming response body] feature is behind the dom.streams.enabled preference and the javascript.options.streams preference. To change preferences in Firefox, visit about:config.

Firefox disables those 2 options by default & they need to be enabled for this to work.

@sandro
Copy link

sandro commented Jun 30, 2022

For a slightly different style:

async function doit() {
  const response = await fetch("http://localhost:3000")
  const reader = response.body.getReader()
  const decoder = new TextDecoder()
  let result = await reader.read()
  while (!result.done) {
    const text = decoder.decode(result.value)
    console.log("chunk is", text)
    result = await reader.read()
  }
}

doit()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment