ReadableStream

Baseline

20191

ReadableStream API Fetch API ReadableStream Response body

ReadableStream

ReadableStream()

ReadableStream.locked

ReadableStream.from(): ReadableStream

ReadableStream.cancel(): Promise reason
ReadableStream.getReader()
ReadableStream.pipeThrough(): /
ReadableStream.pipeTo(): ReadableStream WritableStream Promise
ReadableStream.tee(): tee tee 2 2 ReadableStream

ReadableStream for await...of

const stream = new ReadableStream(getSomeSource());

for await (const chunk of stream) {
  //  'chunk' 
}

breakthrowreturn

TypeError

values() { preventCancel: true }

for await (const chunk of stream.values({ preventCancel: true })) {
  // 'chunk' 
  break;
}
//  ...

HTML Response

Uint8Array ReadableStream

fetch("https://www.example.org")
  .then((response) => response.body)
  .then((rb) => {
    const reader = rb.getReader();

    return new ReadableStream({
      start(controller) {
        // 
        function push() {
          // done value  Uint8Array 
          reader.read().then(({ done, value }) => {
            // 
            if (done) {
              console.log("done", done);
              controller.close();
              return;
            }
            // 
            controller.enqueue(value);
            // 
            console.log(done, value);
            push();
          });
        }

        push();
      },
    });
  })
  .then((stream) =>
    // 
    new Response(stream, { headers: { "Content-Type": "text/html" } }).text(),
  )
  .then((result) => {
    // Do things with result
    console.log(result);
  });

from() Array Map,

const myReadableStream = ReadableStream.from(iteratorOrAsyncIterator);

from()

function iteratorToStream(iterator) {
  return new ReadableStream({
    async pull(controller) {
      const { value, done } = await iterator.next();

      if (done) {
        controller.close();
      } else {
        controller.enqueue(value);
      }
    },
  });
}

for await...of

fetch() for await...of

const response = await fetch("https://www.example.org");
let total = 0;

// Iterate response.body (a ReadableStream) asynchronously
for await (const chunk of response.body) {
  // Do something with each chunk
  // Here we just accumulate the size of the response.
  total += chunk.length;
}

// Do something with the total
console.log(total);


Streams # rs-class

MDN

2023924 MDN

GitHub