提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
如果有问题可以联系我**:
前言
之前写过一篇使用 SSE(-Sent )发送GET请求接受 数据的文章:
如果没看过可以去看一下:
从零开始开发自己的平台 之 SSE(-Sent )客户端和服务端
在文章最后留了一个问题 SSE是通过get参数发送消息的,但是get是有限制的,因此这个方法并
不好,那如何像一样让SSE发送POST 请求呢?本文讲解如何使用fetch实现。
一、fetch是什么?
fetch是中一种用于发送网络请求的API。使用fetch,您可以发送HTTP请求(如GET、
POST、PUT、等),并处理响应。它返回一个对象,允许您使用then()方法来处
理成功的响应或catch()方法来处理错误。
二、fetch 发送POST请求的示例
fetch('url', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => {
// 处理返回的数据
console.log(data);
})
.catch(error => {
// 处理错误
console.error('请求失败:', error);
});
上面的示例比较简单就是使用fetch发送了一个POST请求,请求的内容也比较简单。然后输出返回
的内容,这样请求是正常的传输而不是流式传输,我们使用的参数 需要使用流式传输。我
们应该如何使用流式传输呢
三、fetch 使用流式传输
const reader = response.body.getReader();
let result = "";
while (true) {
const { done, value } = await reader.read();
if (done) break;
let result=new TextDecoder().decode(value)
console.log(result)
}
在上面的代码中,使用.body.()方法来获取一个可读取响应体数据的对象
的主要原因是为了支持流式()读取响应数据。当我们发送请求并获取响应时,响应体
数据可能会以分块()的形式传输,而不是一次性将整个响应体传输完毕。这种分块传输
对于处理大型响应或网络速度较慢的情况非常有用,它允许我们逐步处理响应数据,而不必等待整
个响应完成。对象提供了一个read()方法,它可以异步读取响应体的下一个分块数据。通过
使用await .read(),我们可以等待并获取下一个数据分块的内容。在代码中的循环中,我们
使用.read()读取数据分块使用对象进行流式读取可以提高效率和性能,特别是当处理
大量数据或网络延迟较高时。它允许我们逐步处理响应数据,减少内存占用和等待时间。
因此,使用()来读取返回的内容是为了支持流式处理响应数据,使得代码更具灵活性和
效率。使用读取流的字节流数据 然后再用将流数据解码为字符串。这样就实现了fetch发送POST 读取
返回流数据。
总结
通过上面的代码可以建立一个基于本地html的客户端,如果是自己做平台不想暴漏key也可以让fetch链接自己的服务器,自己服务器在通过sse和客户端通讯就行了。上面代码没有主体数据部分,这部分可自行构造,和上面的示例一样格式即可。如果还有不明白的地方可以私信或者联系我
如果有问题可以联系我**: