Home > Software engineering >  Fetch API as readable stream
Fetch API as readable stream

Time:10-24

Given a description in MDN:

As a JavaScript developer, programmatically reading and manipulating streams of data received over the network, chunk by chunk, is very useful!

Given an example:

Now you've got your reader attached, you can read data chunks out of the stream using the ReadableStreamDefaultReader.read()

I can't clearly understand if we use fetch('./tortoise.png') first does it mean it first of all download the whole image and only then we can attach a reader to it to recive data chunk by chunk?

CodePudding user response:

fetch promise resolves before you get all the data, that's why you have to usually call response.json(). json() function waits for the data to load before it can parse it

This code on the other hand:

fetch('./tortoise.png')
  .then((response) => response.body)
  .then((body) => {
    const reader = body.getReader();
    // …
  });

won't wait for the data to finish loading before creating the reader

  • Related