fetch接收流式响应
时间: 2025-04-25 21:52:48 浏览: 51
### 使用 Fetch API 接收并处理流式响应
当使用 `fetch` API 来获取流式数据时,可以利用 JavaScript 的 `ReadableStream` 对象来逐块读取服务器返回的数据。对于 Server-Sent Events (SSE),这尤其有用,因为它支持服务器向客户端推送更新而无需重新建立连接。
下面是一个具体的实现方式:
#### 创建 Fetch 请求以接收 SSE 流
```javascript
const eventSource = new EventSource('/stream-endpoint');
eventSource.onmessage = function(event) {
console.log('New message:', event.data);
};
eventSource.onerror = function(err) {
console.error('EventSource failed:', err);
};
```
然而,在某些情况下可能更倾向于直接通过 `fetch` 方法操作流式接口而非依赖于专门的 `EventSource` 构造函数。此时可以通过如下方式进行:
#### 利用 Fetch 和 ReadableStream 实现自定义流处理器
```javascript
async function handleStreamingResponse(url) {
const response = await fetch(url);
if (!response.ok || !response.body) throw new Error(`Network response was not ok`);
const reader = response.body.getReader();
let decoder = new TextDecoder();
try {
while(true){
const {done, value} = await reader.read();
if(done){
break;
}
// 将接收到的部分解码成字符串形式
const chunk = decoder.decode(value, { stream: true });
processChunk(chunk); // 用户定义的方法用于处理每一块数据
}
} catch(error){
console.error('Failed to read the stream', error);
} finally {
reader.releaseLock();
}
}
```
此方法能够更好地控制如何以及何时消费来自服务端的信息片段[^1]。此外,这种方法适用于那些不完全遵循标准 SSE 协议的服务端点,提供了更大的灵活性去适应不同的应用场景需求[^2]。
阅读全文
相关推荐


















