New Response from Stream in Microsoft Edge

Question

Does someone know of a way to create a new Response from a ReadableStream in Microsoft Edge?

For Chrome, this is quite simple. You can just take a ReadableStream and pass it in the constructor of Response as the first argument. This way you can, for example, create a new Response with say another status code from a network response, without copying the response:

fetch('https://www.baqend.com/')
  .then(res => new Response(res.body, { status: 222 }))
  .then(it => it.text())
  .then(it => console.log('Text prefix ' + it.substr(0,16)))
  .catch(it => console.log('error: ' + it))

While this works perfectly in Chrome, Edge does not support ReadableStream as input for the Response constructor. The only way I get it to work in Edge is when I get the text response first (effectively copying the response and blocking the stream):

fetch('https://www.baqend.com/')
  .then(it => it.text())
  .then(text => new Response(text, { status: 222 }))
  .then(it => it.text())
  .then(it => console.log('Text prefix ' + it.substr(0,16)))
  .catch(it => console.log('error: ' + it))

Does anyone know a way to create a new Response from a Readable Stream in Edge?

PS: I am using Microsoft Edge 42.17115.1.0 (latest developer preview, since I am testing Service Workers)

PPS: The first code does not work in firefox either because firefox does not support getting a RedableStream from Response.body. Edge does expose Response.body though.

Mariquilla

Did you check the edge developer doc about Fetch ? github.com/MicrosoftDocs/edge-developer/blob/master/…, the fetch API seems to be not completely implemented on IE/Edge developer.mozilla.org/en-US/docs/Web/API/Fetch_API – Shel

The doc does not tell much about the case described above. Edge does implement the fetch API as well as RedableStream though. – Mariquilla

What's wrong with it.text()? I did a fiddle and it works fine. – Microcrystalline

would modernizer help you resolve this issue? – Pyrometer

` if (browser === "the-one-they-make-you-use-at-work") { getTheOldLameExperience(); } else { showOffAwesomeNewFeature(); }` – Pyrometer

have you looked at polyfills ? import { ReadableStream } from "web-streams-polyfill"; npmjs.com/package/web-streams-polyfill – Pyrometer

There are 2 problems with it.text(): First, it blocks the browser from consuming the stream as it arrives. Browsers are built to process the HTML as it arrives over multiple roundtrips. This way the browser can issue requests for CSS and JS files even though it has received only the first few lines of HTML. Second, it copies the response. We I get the text, I consume the stream of the current response and create a new Response out of it, which is then consumed by the browser. I really care about the performance of the code in this example. So polyfills and modenizer won't be enou – Mariquilla

You can set a preload header to circumvent the roundtrip problem. – Apocarp

@Mariquilla if you're looking for streaming support of parsing HTML as it arrives, try this out. Please let me know if that helps, if so I'll write a full answer. – Blastogenesis

Hey @PatrickRoberts, not sure how XHR request could help. I"m in the context of a Service Worker, fetching the resource and looking to give the modified stream back to the browser as a Response to the request. The streaming and modifying part works in Edge but you cannot create a Response from the obtained stream again. – Mariquilla

Answer 1

Try this:

https://www.npmjs.com/package/web-streams-polyfill

var streams = require("web-streams-polyfill");
var readable = new streams.ReadableStream;

// Or, in ES6

import { ReadableStream } from "web-streams-polyfill";

Byrne