consume browser readable stream as async iterator

consume-browser-readable-stream-as-async-iterator.js

async function main() {
  const { body } = await fetch('https://jsonplaceholder.typicode.com/photos')
  const streamIterator = new StreamChunkIterator(body.getReader())
  
  for await (const chunk of streamIterator) {
    console.log(chunk)
  }
  
  console.log('Voilà!')
}
  
// you can probably make this code thinner
// maybe dump the getters or not make it a class at all
class StreamChunkIterator {
  constructor(reader) {
    this._reader = reader
    this._decoder = new TextDecoder('utf-8')
  }

  get value() {
    return this._value
  }

  get done() {
    return this._done
  }

  async next() {
    const { value, done } = await this._reader.read()
    if (!done) {
      this._value = this._decoder.decode(value, { stream: true })
    }
    this._done = done
    return this
  }

  [Symbol.asyncIterator] () {
    return this
  }
}