Imagine, for example, that you need to fetch a list of 1,000 GitHub users, then make an additional request with the ID to fetch avatars for each of them. You don’t necessarily want to wait for each user in the sequence; you just need all the fetched avatars. Please note, if the request body is a string, then Content-Type header is set to text/plain;charset=UTF-8 by default. But, as we’re going to send JSON, we use headers option to send application/json instead, the correct Content-Type for JSON-encoded data. CF worker to log all REST API activity in a non-blocking way to an external service - including response time.
Chrome Dev Summit 2020 is back & going virtual on December 9-10. Learn more.
Streaming requests with the fetch API
Chrome 85 has an experimental implementation of request streams, meaning you canstart making a request before you have the whole body available.
As with the previous examples, install node-fetch with the following: npm install [email protected] Recent versions of this library use promises, so we're able to use async/await syntax with it as well.
![Await fetch error Await fetch error](https://assets.simpleviewinc.com/simpleview/image/fetch/c_limit,q_75,w_1200/https://assets.simpleviewinc.com/simpleview/image/upload/crm/utahvalley/StewartFalls20-6cab27e95056a36_6cab2925-5056-a36a-0b66b05b8644194a.jpg)
You could use this to:
- Warm up the server. In other words, you could start the request once the userfocuses a text input field, and get all of the headers out of the way, thenwait until the user presses 'send' before sending the data they entered.
- Gradually send data generated on the client, such as audio, video, or input data.
- Recreate web sockets over HTTP.
But since this is a low-level web platform feature, don't be limited by my ideas.Maybe you can think of a much more exciting use-case for request streaming.
Try out request streams #
Enabling via chrome://flags #
![Await Fetch Await Fetch](https://spin.atomicobject.com/wp-content/uploads/20180210215208/family-tree-2-2-590x303.png)
Try out request streams in Chrome 85 by flipping an experimental flag:
enable-experimental-web-platform-features
.Enabling support during the origin trial phase #
Fetch request streams are available in an origin trial as of Chrome 85. Theorigin trial is expected to end in Chrome 87.
Origin trials allow you to try new features and give feedback on theirusability, practicality, and effectiveness to the web standards community. Hype pro 3 6 8. Formore information, see the Origin Trials Guide for Web Developers.To sign up for this or another origin trial, visit the registration page.
Register for the origin trial #
- Request a token for your origin.
- Add the token to your pages. There are two ways to do that:
- Add an
origin-trial
<meta>
tag to the head of each page. For example,this may look something like:<meta http-equiv='origin-trial'>
- If you can configure your server, you can also add the tokenusing an
Origin-Trial
HTTP header. The resulting response header shouldlook something like:Origin-Trial: TOKEN_GOES_HERE
- Add an
Demo #
This shows how you can stream data from the user to the server, and send databack that can be processed in real time.
Yeah ok it isn't the most imaginative example, I just wanted to keep it simple,okay?
Anyway, how does this work?
Previously on the exciting adventures of fetch streams #
Response streams have been available in all modern browsers for a while now.They allow you to access parts of a response as they arrive from the server:
Each
value
is a Uint8Array
of bytes. The number of arrays you get and thesize of the arrays depends on the speed of the network. If you're on a fastconnection, you'll get fewer, larger 'chunks' of data. If you're on a slowconnection, you'll get more, smaller chunks.If you want to convert the bytes into text, you can use
TextDecoder
,or the newer transform stream if your target browsers supportit:TextDecoderStream
is a transform stream that grabs all those Uint8Array
chunks and converts them to strings.Password vault manager (enterprise)3 5 3 0 download free. Streams are great, as you can start acting on the data as it arrives. Forinstance, if you're receiving a list of 100 'results', you can display the firstresult as soon as you receive it, rather than waiting for all 100.
Anyway, that's response streams, the exciting new thing I wanted to talk aboutis request streams.
Streaming request bodies #
Requests can have bodies:
Previously, you needed the whole body ready to go before you could start therequest, but now in Chrome 85 you can provide your own
ReadableStream
of data:The above will send 'This is a slow request' to the server, one word at a time,with a one second pause between each word.
Each chunk of a request body needs to be a
Uint8Array
of bytes, so I'm usingpipeThrough(new TextEncoderStream())
to do the conversion for me.Writable streams #
Sometimes it's easier to work with streams when you have a
WritableStream
. You can do this using an 'identity' stream, which is a readable/writable pair that takes anything that's passed to its writable end, and sends it to the readable end. You can create one of these by creating a TransformStream
without any arguments:Now, anything you send to the writable stream will be part of the request. Thislets you compose streams together. For instance, here's a silly example wheredata is fetched from one URL, compressed, and sent to another URL:
The above example uses compressionstreams to compressarbitrary data using gzip.
Feature detection #
If you provide a body object that the browser doesn't specifically handle, itwill call
toString()
on the object and use the result as the body. If thebrowser doesn't support request streams, that means the request body becomes'[object ReadableStream]'
– probably not what you want to send to the server.To avoid this, use feature detection:This works because the browser adds a
Content-Type
header oftext/plain;charset=UTF-8
to the request if the body is text. The browser onlytreats the body as text if it doesn't support request streams, otherwise itwon't add a Content-Type
header at all.Restrictions #
Streaming requests are a new power for the web, so they come with a fewrestrictions:
Restricted redirects #
Some forms of HTTP redirect require the browser to resend the body of therequest to another URL. To support this, the browser would have to buffer thecontents of the stream, which sort-of defeats the point, so it doesn't do that.
Instead, if the request has a streaming body, and the response is an HTTPredirect other than 303, the fetch will reject and the redirect will not befollowed.
303 redirects are allowed, since they explicitly change the method to
GET
anddiscard the request body.HTTP/2 only by default #
By default, the fetch will be rejected if the connection isn't HTTP/2. If youwant to use streaming requests over HTTP/1.1, you need to opt in:
Caution:
allowHTTP1ForStreamingUpload
Elmedia video player pro 7 9 crack. is non-standard and will only be used as part ofChrome's experimental implementation.According to HTTP/1.1 rules, request and response bodies either need to send a
Content-Length
header, so the other side knows how much data it'll receive, orchange the format of the message to use chunkedencoding. With chunkedencoding, the body is split into parts, each with their own content length.Chunked encoding is pretty common when it comes to HTTP/1.1 responses, butvery rare when it comes to requests. Because of this, Chrome is a little worriedabout compatibility, so it's opt-in for now.
This isn't an issue for HTTP/2, as HTTP/2 data is always 'chunked', although itcalls the chunksframes.Chunked encoding wasn't introduced until HTTP/1.1, so requests with streamingbodies will always fail on HTTP/1 connections.
Depending on how this trial goes, the spec will either restrict streamingresponses to HTTP/2, or always allow it for both HTTP/1.1 and HTTP/2.
No duplex communication #
A little-known feature of HTTP (although, whether this is standard behaviourdepends on who you ask) is that you can start receiving the response whileyou're still sending the request. However, it's so little-known, that it isn'twell supported by servers, and, well, browsers.
In Chrome's current implementation, you won't get the response until the bodyhas been fully sent. In the following example
responsePromise
won't resolveuntil the readable stream has been closed. Anything the server sends before thatpoint will be buffered.Node Fetch
The next best thing to duplex communication is to make one fetch with astreaming request, then make another fetch to receive the streaming response.The server will need some way to associate these two requests, like an ID in theURL. That's how the demo works.
Potential issues #
Yeah, so… this is a new feature, and one that's underused on the internet today.Here are some issues to look out for:
Incompatibility on the server side #
Some app servers don't support streaming requests, and instead wait for the fullrequest to be received before letting you see any of it, which kinda defeats thepoint. Instead, use an app server that supports streaming, likeNodeJS.
But, you're not out of the woods yet! The application server, such as NodeJS,usually sits behind another server, often called a 'front-end server', which mayin turn sit behind a CDN. If any of those decide to buffer the request beforegiving it to the next server in the chain, you lose the benefit of requeststreaming.
Also, if you're using HTTP/1.1, one of the servers may not be prepared forchunked encoding, and may fail with an error. But hey, at least you can testthat and try to change servers if needed.
…long sigh…
Incompatibility outside of your control #
If you're using HTTPS you don't need to worry about proxies between you and theuser, but the user may be running a proxy on their machine. Some internetprotection software does this to allow it to monitor everything that goesbetween the browser and network.
There may be cases where this software buffers request bodies, or in the case ofHTTP/1.1, doesn't expect chunked encoding, and breaks in some exciting way.
Right now, it's not clear how often this will happen, if at all.
If you want to protect against this, you can create a 'feature test' similar tothe demo above, where you try to stream some data without closing thestream. If the server receives the data, it can respond via a different fetch.Once this happens, you know the client supports streaming requests end-to-end.
Feedback welcome #
Await Fetch Catch
Feedback from the community is crucial to the design of new APIs, so please tryit out and tell us what you think! If you encounter any bugs, please reportthem, but if you have generalfeedback, please send it to the blink-network-dev GoogleGroup.
Photo by LauraLefurgey-SmithonUnsplash
Await Fetch Api
Last updated: Improve article