Did you know that Chrome Browser has a readableStream? [on-hold until writeableStream]

TLDR; Experimental, led me down a rabbit hole of new non-standard APIs.
Read more on: https://streams.spec.whatwg.org/#rs-class

**UPDATE**

AS of March 27th, Chrome does not support writableStream (which would stream the readableStream to either a file or save to Array;
https://bugs.chromium.org/p/chromium/issues/detail?id=658144


Initially I was looking up how to do a simple GET Request (yeah I could’ve done it in XMLHttpRequest, but why use something that’s supported natively?)… which brought to me to the Fetch API.

The fetch api seems to be supported natively in service workers… which then lead me down to

fetch(url)
.then((response) => {
console.log(response)
})

which then lead me down the readableStream… but if you click on that…

it’s locked!!! — Denied!

Ok, so how do I read that readableStream?

So previously, our code now changes to

fetch(url)
.then((response) => {
response.body
.getReader()
.read()
.then((value, done) => {
console.log(v.value);
})
});

What does v.value give me then?

Uint8Array!!!

We need to decode this, much like how we have to convert chunks/buffer to strings

fetch(url)
.then((response) => {
response.body
.getReader()
.read()
.then((value, done) => {
var decoder = New TextDecoder('utf-8');
console.log(decoder.decode(v.value));
});
});

Caveats:

It seems that there is a max size, haven’t figure it out yet — might save this for another time.

Till another time.
D

Like what you read? Give Denis Tsoi a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.