提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

如果有问题可以联系我**：https://gitee.com/xiaoyuren/gpt3

前言

之前写过一篇使用 SSE（Server-Sent Events)发送GET请求接受chatgpt Stream数据的文章：

如果没看过可以去看一下：

从零开始开发自己的chatgpt平台 之 SSE（Server-Sent Events)客户端和服务端

在文章最后留了一个问题 SSE是通过get参数发送消息的，但是get是有限制的，因此这个方法并

不好，那如何像openai一样让SSE发送POST 请求呢？本文讲解如何使用fetch实现。

一、fetch是什么？

fetch是JavaScript中一种用于发送网络请求的API。使用fetch，您可以发送HTTP请求（如GET、

POST、PUT、DELETE等），并处理响应。它返回一个Promise对象，允许您使用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请求，请求的内容也比较简单。然后输出返回

的内容，这样请求是正常的传输而不是流式传输，我们使用openai的参数 需要使用流式传输。我

们应该如何使用流式传输呢

三、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)
        }

在上面的代码中，使用response.body.getReader()方法来获取一个可读取响应体数据的reader对象

的主要原因是为了支持流式（streaming）读取响应数据。当我们发送请求并获取响应时，响应体

数据可能会以分块（chunks）的形式传输，而不是一次性将整个响应体传输完毕。这种分块传输

对于处理大型响应或网络速度较慢的情况非常有用，它允许我们逐步处理响应数据，而不必等待整

个响应完成。reader对象提供了一个read()方法，它可以异步读取响应体的下一个分块数据。通过

使用await reader.read()，我们可以等待并获取下一个数据分块的内容。在代码中的循环中，我们

使用reader.read()读取数据分块使用reader对象进行流式读取可以提高效率和性能，特别是当处理

大量数据或网络延迟较高时。它允许我们逐步处理响应数据，减少内存占用和等待时间。

因此，使用getReader()来读取返回的内容是为了支持流式处理响应数据，使得代码更具灵活性和

效率。使用getReader读取流的字节流数据 然后再用TextDecoder将流数据解码为字符串。这样就实现了fetch发送POST 读取

返回流数据。

总结

通过上面的代码可以建立一个基于本地html的chatgpt客户端，如果是自己做平台不想暴漏key也可以让fetch链接自己的服务器，自己服务器在通过sse和客户端通讯就行了。上面代码没有主体数据部分，这部分可自行构造，和上面的示例一样格式即可。如果还有不明白的地方可以私信或者联系我

如果有问题可以联系我**：https://gitee.com/xiaoyuren/gpt3