fetch-event-source 的安装 和 使用

项目场景:

需要使用到 sse  和需要 post传值 


问题描述

我按照在网上找到的 安装和使用步骤,操作后   总是引用失败 


原因分析:

安装步骤  过时了?


解决方案:

fetch-event-source的github地址

按照fetch-event-source的技术文档安装

fetch-event-source的安装

npm install @microsoft/fetch-event-source

引用

import { fetchEventSource } from '@microsoft/fetch-event-source';

使用

 fetchEventSource('/main_serve', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                   //你要传的值
                    "text": '你好'
                }),
                onmessage(ev) {
                    console.log("ev", JSON.parse(ev.data));
                  
                }
            });

### Fetch Event Source使用方法 `fetch-event-source` 是一种基于 `fetch` 实现 Server-Sent Events (SSE) 功能的方法。此库旨在简化通过 fetch API 进行 SSE 请求的过程。 #### 安装依赖包 为了使用 `fetch-event-source`,首先需要安装对应的 npm 包: ```bash npm install @microsoft/fetch-event-source ``` #### 导入模块并初始化连接 在项目中导入该模块,并设置与服务器之间的通信路径来建立 SSE 链接: ```javascript import { fetchEventSource } from '@microsoft/fetch-event-source'; // 初始化链接至指定URL的事件源对象 fetchEventSource('/stream-endpoint', { onopen: () => console.log('Connection opened'), }); ``` #### 处理来自服务端的消息 当有新消息到达时会触发相应的回调函数,在这里可以处理这些数据或将其渲染到页面上: ```javascript fetchEventSource('/stream-endpoint', { onmessage: ({ data }) => { try { const parsedData = JSON.parse(data); console.log(parsedData); } catch (_) { console.error(`Failed to parse message ${data}`); } }, }); ``` 对于特定类型的事件也可以单独监听,这类似于原生 `EventSource` 对象的做法[^1]: ```javascript fetchEventSource('/stream-endpoint', { onfoo: (event) => console.log('Received foo event:', event), onbar: (event) => console.log('Received bar event:', event), }); ``` #### 错误处理机制 如果发生网络错误或其他异常情况,则可以通过配置中的 `onerror` 参数来进行捕获响应: ```javascript fetchEventSource('/stream-endpoint', { onerror: (err) => { if (!navigator.onLine || err.type === 'networkError') { alert('Network connection lost'); } }, }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值