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

If you use a ReadableStream you would lose the ability to pass in any form data? — 1.21 gigawatts
– 1.21 gigawatts, Commented Oct 12, 2024 at 0:08
@1.21gigawatts Well, yeah, the purpose of this has nothing to do with forms... — Brad
– Brad, Commented Oct 12, 2024 at 0:26

Anne · Accepted Answer · 2016-12-19 12:14:40Z

24

+50

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, 2016 at 12:14

Anne

7,7431 gold badge31 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Brad Over a year ago

Thank you. What's the reason that the MDN docs today say a ReadableStream is usable? What uses it today?

Brad Over a year ago

Might just be a documentation quirk then, but the MDN docs say a ReadableStream is usable in the request. developer.mozilla.org/en-US/docs/Web/API/Request

Domenic Over a year ago

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 bugs.chromium.org/p/chromium/issues/detail?id=688906

anthumchris Over a year ago

I submitted an MDN doc modification remove positive indicators for ReadableStream in Request bodies: github.com/mdn/browser-compat-data/pull/1333

Pierre Over a year ago

for those looking, Browsers test on this specific feature can be run here w3c-test.org/fetch/api/basic/request-upload.any.html

|

cdauth · Accepted Answer · 2024-07-30 01:38:18Z

5

Update in 2024: As documented on MDN, using request streams is possible in all important browsers except Firefox since September 2022. The implementation in Firefox is tracked in this issue.

It should be noted that even though most browser support request streams now, there are some restrictions, as discussed in this issue:

To use a ReadableStream as the body, you also must specify duplex: "half" according to the latest specification. Some browsers might not enforce this yet. This setting means that you will only start receiving the response stream after the request stream has finished. In the future, support for duplex: "full" may be added, which would enable starting to receive the response while the request is still sending.
Right now, browsers only support request streams over HTTP/2 and HTTP/3, but not HTTP/1. Since browsers only permit HTTP/2 and HTTP/3 over HTTPS, request streaming is not possible right now over unencrypted connections.

As a workaround, you could change your backend API to support uploading chunks of the data in separate requests, or you could use a websocket to transmit the data. If you don’t have control over the backend, you could set up an intermediate backend that forwards the chunks as a request stream.

edited Jul 30, 2024 at 1:38

answered Jun 12, 2024 at 13:45

cdauth

8,0263 gold badges51 silver badges60 bronze badges

3 Comments

1.21 gigawatts Over a year ago

In XMLHTTPRequest you simply assigned an acceptable file type to a FormData object and then added a listener to the request.upload event. That event handler could then be used to monitor the upload progress. Using ReadableStream seems to indicate that you'd not be able to send any form data. This seems like it's missing a vital piece of the puzzle.

1.21 gigawatts Over a year ago

Could you post example code that works in supported browsers? Doesn't have to work in all browsers. Then anyone could implement it and when it's available and developers would have an example to test with. There is no example code for this on MDN.

cdauth Over a year ago

I found an example here that also discusses the upload progress topic: stackoverflow.com/a/69400632/242365

Collectives™ on Stack Overflow

Fetch with ReadableStream as Request Body

2 Answers 2

10 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related