Quick example of using fetch to parse a chunked response

fetch-chunked.js

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();
    }
  }
}

response.txt

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>

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()