Fetch with ReadableStream as Request Body

Question

I'm trying to use fetch with a ReadableStream. In this example, the ReadableStream should simply repeat "Some data..." indefinitely.

fetch('/', {
  method: 'POST', 
  body: new ReadableStream({
    pull: function(controller) {
      console.log('pull called!');
      controller.enqueue('Some data...');
    }
  })
});

This doesn't work. While pull is executed once, no data is sent in the request body.

POST / HTTP/1.1
Host: example.com
Connection: keep-alive
Content-Length: 0
Origin: https://example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36
Accept: */*
Referer: https://example.com/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8

How can I make a ReadableStream (or any kind of stream where I can write dynamic data) usable with fetch?

Alternatively, if this isn't yet possible, could you please indicate this? Thank you.

Note: This is a more specific spin-off question from: Method for streaming data from browser to server via HTTP

https://github.com/whatwg/fetch/issues/439 – guest271314 Dec 18 '16 at 18:51 — guest271314, Dec 18 '16 at 18:51

score 22 · Accepted Answer · answered Dec 19 '16 at 12:14

22

We're working on making this work, see https://github.com/whatwg/fetch/pull/425 for the PR to the Fetch Standard. Once that is done you can expect this to make its way into browsers (slowly).

answered Dec 19 '16 at 12:14

Anne

7,070
1
26
27

2

Thank you. What's the reason that the MDN docs today say a ReadableStream is usable? What uses it today? – Brad Dec 19 '16 at 15:22
It is usable with a `Response` object in Chrome. – Anne Dec 19 '16 at 15:48
1

Might just be a documentation quirk then, but the MDN docs say a ReadableStream is usable in the request. https://developer.mozilla.org/en-US/docs/Web/API/Request – Brad Dec 19 '16 at 16:09
Yeah, that looks like a copy-and-paste error. At least the mention in that note. On the other hand, it should be accurate somewhere next year. – Anne Dec 29 '16 at 14:32
Is there any update on this? I seem to have exactly the same result in Chrome (58.0.3029.110, Canary and even Electron 1.6.2) as the person asking the question -- `Content-Length: 0`, `poll` is only called once, the connection is open and the request is pending (with only headers at the server end). Firefox (53.0.2 and Nightly 55.0a1) doesn't even have `ReadableStream`. – Armen Michaeli May 11 '17 at 13:31
3

We are still working on some fundamental rearchitecting of Chrome's networking code in order to make this possible, although it is a high priority for us. You can follow along, for Chrome at least, in https://bugs.chromium.org/p/chromium/issues/detail?id=688906 – Domenic May 12 '17 at 14:11
@Domenic Thank you for your swift reply and the useful information you have provided. – Armen Michaeli May 13 '17 at 11:12
1

I submitted an MDN doc modification remove positive indicators for `ReadableStream` in `Request` bodies: https://github.com/mdn/browser-compat-data/pull/1333 – anthumchris Mar 13 '18 at 22:06
1

for those looking, Browsers test on this specific feature can be run here http://w3c-test.org/fetch/api/basic/request-upload.any.html – Pierre Mar 07 '19 at 17:51
In case anyone hasn't seen it, there is some discussion going on here: https://groups.google.com/a/chromium.org/forum/#!topic/blink-network-dev/bsVgOxNCzFc – Brad Sep 09 '19 at 02:11

Fetch with ReadableStream as Request Body

1 Answers1

Linked

Related