Streaming capabilities comes to zlFetch
Published on:Just last weekend, I sat down and gave zlFetch another brand new update — streaming capabilities. With v6.2.0, zlFetch is now able to:
- Receive and convert streams automatically (without you having to write a stream decoder manually)
- Have Typescript support (thanks to juji).
Now zlFetch is now prime for handling AI-related streams😉.
What is zlFetch?
It's a library I've created that helps you with the Fetch API. It provides a ton of quality-of-life improvements like:
- Automatic response solution (so no need to use
response.json) - Promise-like error handling
- Usage with
awaiteasily - Simple Basic and Token based authentication headers
- And a ton of other things
Just my personal opinion:
Three Types of Streams
As far as I know, there are three types of streams:
- Server Sent Events (SSE)
- Chunked Encoding
- A normal stream
Server Sent Events lets you create a connection between a browser and the server. If the connection is dropped, the browser can automatically connect (with the help of Event Source). This happens if the server sets Content-Type: text/event-stream.
Chunked Encoding lets one server tell another that they're going to send data in bits. The receiving server is supposed to receive everything, combine them, before sending letting the clients use them. This happens if the sending server sets the Transfer-Encoding: Chunked header.
Normal Streams happens when the sending server doesn't send over a Content-Length property.
zlFetch detects all three kinds of streams and decodes them for you automatically, so you can just loop through the response body to get your data — no need for manual decoding!
Oh, by the way, if the chunk contains JSON data, zlFetch converts that into a JavaScript object for you automatically. Again, quality of life improvements — so you can build stuff without having to deal with boilerplate!
// Basic Stream Handling Example with Fetch
const response = await fetch('some-url')
const reader = response.body.getReader()
const decoder = new TextDecoder()
while (true) {
const { done, value } = await reader.read()
buffer += decoder.decode(value, { stream: true })
// Decode the chunk
let chunk = typeof value === 'string'
? value
: decoder.decode(value, { stream: true })
chunk = chunk.trim()
try {
chunk = JSON.parse(chunk)
} catch (error) {}
// FINALLY, you do something with your chunk 🫠
}
// With zlFetch
const response = await zlFetch('some-url')
for await (const chunk of response.body) {
// Do something with your chunk 😄
}
Even for chunked encoding, you can actually receive the data in your browser as chunks! To make that happen, we can't parse the stream in advance inside zlFetch. But we've given you a readStream helper to, you know, deal with the stream decoding stuff.
import zlFetch, { readStream } from 'zl-fetch'
// Decoding chunked encoding as streams in the browser
const response = await zlFetch('some-url')
// Just add this helper
const stream = readStream(response)
for await (const chunk of stream) {
// Then do something with your chunk 😄
}
Text Event Stream and Server Sent Events
Server Sent Events is a pretty cool technology. It's similar to Fetch, but made for streams — because your browser can reconnect to the server if you get disconnected!
The best way to consume Server Sent Events is through the Event Source API. We've made that simpler too with zlEventSource.
I'd leave further explanation for a future article. If you're interested, you can check out the docs right now 😉.