使用post请求建立长连接实现sse，接收后端主动发来的消息，实现chat _请求

每日鸡汤：每个你想要学习的瞬间都是未来的你向自己求救
最近在做一个chat相关的功能，然后由于接口返回特别特别慢，所以需要搞一个慢慢等待的效果，就是接口一个单词一个单词的返回，然后前端收到一个展示一个，提升用户体验。
说实话我是第一次做这类需求，他们给完接口文档我一脸懵？啥？post请求一次，也能实现接收后端主动来发来的消息？就跟一样。
一问才知道原来真可以，真的是每天都能学习到新鲜的知识，使用即可，就是传说中的sse【-send-】
没错，本菜鸟都干了好几年了，还没做过这种需求，我做的比较多的就是前端轮训一个接口用或者
- Web API 接口参考 |接口是 web 内容与服务器发送事件通信的接口。

文章插图
注意，前端要想能收到后端发来的消息，毫无疑问我们肯定要监听消息！！牢记【监听】在前端开发中的重要性，监听接口返回，监听事件触发等等，认真听才可以让我们收到别人给我们的消息。
可以看一下mdn的官方文档用法很简单，但是问题是原生的不能使用post方法，只能使用get方法，而且还不能自定义请求，所以我们可以使用npm包，常用的有
event-- 这个可以自定义请求头
@/fetch-event- 这个可以使用post请求，也可以自定义请求头功能强大，建议用这个
在开发中遇到了一问题，我按照@/fetch-event-的例子写好了代码，怎么都接收不到请求，还以为这个插件有问题，或者我写错了，结果研究半天才发现是后端代码写错了，他根本没有一个一个给我返回，而是等了好长时间所有数据准备完毕才返回，这样导致请求都超时了，自然就收不到数据。
所以如果你也遇到了问题，不妨考虑一下是否是这个原因，这个插件的demo亲测是没有问题的，我用的版本是"@/fetch-event-": "^2.0.1",
参考
【更新】
还有一个问题就是错误处理，接口报错了怎么办，第一个想到的肯定是在里面捕获，但是在打印出来里面抛出的错误是
-type to be text/event-, : /+json
这个不是我们想要的，其实需要在里面处理，可以看一下官方文档，同志们一定要好好看官方文档啊！！
还有一个问题
@/fetch-event- 默认在浏览器当前标签页面不处于活动状态的时候就取消当前请求，切回来的时候再重新请求，这样很多时候不符合我们的需求，可以在请求参数加上: true,
【使用post请求建立长连接实现sse，接收后端主动发来的消息，实现chat】

fetchEventSource(url, {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify(params),// 加上这句话openWhenHidden: true,//...}