A lightweight client for reading streaming HTTP responses using Fetch and ReadableStream.
npm install fetch-stream-readerbash
使用 pnpm
pnpm add fetch-stream-reader使用 npm
npm install fetch-stream-reader使用 yarn
yarn add fetch-stream-reader
`🔧 使用示例
`ts
import FetchStreamReader from 'fetch-stream-reader'const client = new FetchStreamReader('https://api.example.com/stream', {
Authorization: 'Bearer token'
})
client.on('stream-start', () => {
console.log('开始建立连接和读取流')
})
client.on('stream-message', ({ detail }) => {
console.log('收到数据:', detail)
})
client.on('stream-error', ({ detail }) => {
console.log('流错误:', detail.error)
})
client.on('stream-end', () => {
console.log('流已结束')
})
client.on('stream-abort', () => {
console.log('流已被中止')
})
// 发送请求并建立流连接。
await client.start({ prompt: 'Hello' })
`🧩 支持的事件
| 事件名称 | 描述 |
| ---------------- | ----------------------------------- |
|
stream-start | 已成功建立连接并开始读取流数据时触发 |
| stream-message | 每接收到一条完整且可解析的数据时触发(通常为 JSON 对象) |
| stream-error | 请求失败或数据解析错误时触发,detail 包含原始数据和错误信息 |
| stream-end | 流被服务端正常关闭时触发 |
| stream-abort | 客户端主动调用 stop() 手动中止连接时触发 |
🧪 示例场景
- 📈 实时图表:将服务端推送的数据直接展示在前端图表中
- ⏱️ 长任务进度追踪:从后端持续接收处理进度
- 🧠 AI 模型输出:读取如 OpenAI API 的增量响应文本流
- 📣 即时通知:基于服务端推送事件(SSE)构建通知系统
- 🔄 数据同步:接收远程更新事件并应用本地变更
🛠️ API 文档
$3
创建流式读取器实例。
| 参数 | 类型 | 描述 |
|------|------|------|
|
url | string | 接口地址(必须为 POST 请求地址) |
| headers | Record | 可选的请求头(如认证) |---
$3
发送请求并建立流连接。
---
$3
注册事件监听器。
---
$3
移除事件监听器。
---
$3
中止当前流连接,并清理相关资源。
🧠 最后
如果你正好在构建一个流式通信的 Web 项目,希望
fetch-stream-reader 能帮你少写点重复代码,多专注于用户体验。如果你在使用过程中遇到问题,或者对
fetch-stream-reader` 感兴趣,欢迎一起交流探讨。📬 可加微信(备注 “npm + 昵称”):g_adiu