2

I was learning fetch() and found out that the body of the response uses something called readableStream. According to my research, readable stream allows us to start using the data once it gets being downloaded from the server(I hope I am correct:)). In terms of fetch(), how can readable stream be useful with fetch(), that is, we anyways need to download all of the data then start using it. Overall, I just cannot understand the point of readable stream in fetch() thus I need your kind help:).

wewq
  • 229
  • 3
  • 11
  • The *request body* is used to send data *to* the server. *"we anyways need to download all of the data then start using it"* This is fetching data *from* the server. You usually don't have to wait to get *all* the data to do something with it. There are e.g. streaming JSON parsers which allow you to something with an array element as soon as it was received (before receiving the rest). – Felix Kling Jan 24 '20 at 13:07
  • @FelixKling, ooh my gosh I wanted to say response body – wewq Jan 24 '20 at 13:08
  • _“we anyways need to download all of the data then start using it”_ - says who? What you are fetching must not be a complex data structure like HTML, XML or JSON. It could just simply be lines of text, like CSV, that can easily be processed one-by-one, as soon as they arrive … – 04FS Jan 24 '20 at 13:12
  • Possible duplicate of [Why is the response object from JavaScript fetch API a promise?](https://stackoverflow.com/q/32721850/1048572) – Bergi Jan 24 '20 at 13:14
  • @wewq For example: https://www.npmjs.com/package/bfj#how-do-i-parse-a-stream-of-json – slim Jan 24 '20 at 13:48
  • Does this answer your question? [Why is the response object from JavaScript fetch API a promise?](https://stackoverflow.com/questions/32721850/why-is-the-response-object-from-javascript-fetch-api-a-promise) – TylerH Jan 24 '20 at 16:12
  • https://stackoverflow.com/questions/32721850/why-is-the-response-object-from-javascript-fetch-api-a-promise is not a dupe of this. A Promise of a complete body (or a callback when the complete body is ready) is different from getting the body as a readable stream. – slim Jan 27 '20 at 10:24

1 Answers1

2

Here's one scenario: a primitive ASCII art "video player".

For simplicity, imagine a frame of "video" in this demo is 80 x 50 = 4000 characters. Your video "decoder" reads 4000 characters, displays the characters in a 80 x 50 grid, reads another 4000 characters, and so on until the data is finished.

One way to do this is to send a GET request using fetch, get the whole body as a really long string, then start displaying. So for a 100 frame "video" it would receive 400,000 characters before showing the first frame to the user.

But, why does the user have to wait for the last frame to be sent, before they can view the first frame? Instead, still using fetch, read 4000 characters at a time from the ReadableStream response content. You can read these characters before the remaining data has even reached the client.

Potentially, you can be processing data at the start of the stream in the client, before the server has even begun to process the data at the end of the stream.

Potentially, a stream might not even have a defined end (consider a streaming radio station for example).

There are lots of situations where it's better to work with streaming data than it is to slurp up the whole of a response. A simple example is summing a long list of numbers coming from some data source. You don't need all the numbers in memory at once to achieve this - you just need to read one at a time, add it to the total, then discard it.

slim
  • 40,215
  • 13
  • 94
  • 127
  • thank you for your detailed answer, ok done with readable stream and its benefits. About response.json(), which waits until all of the data is received after that the data is parsed into json. But we anyways have to wait until all of the data is received in order to parse it into json. That is, if we want to programatically work the data we need to parse it into json and to parse it we need to wait the whole data to be received. Is that true? or...? – wewq Jan 24 '20 at 14:34
  • @wewq There are libraries that stream JSON. `bfj` is one for JS. Depending on the expected structure of the JSON, this can introduce challenges. But for example, if you know the JSON will be one long array, you can consume one array element at a time. `bfj` docs have examples. – slim Jan 24 '20 at 15:25
  • thank you for your kind advice I will check out bfj, but dude concerning my last question. Is that true?:) – wewq Jan 24 '20 at 16:08
  • @wewq No it's not true. If your JSON looks like `[ { "name": "Adam" }, { "name": "Joe"}]` a streaming parser can work with the "Adam" record before it has read the "Joe" record. – slim Jan 26 '20 at 15:37