如何用post请求调用Server-Sent Events服务
- Server-Sent Events服务(简称:SSE),本身只支持get请求
- 当在项目中使用的时候,总有后端要用SSE服务,并且使用post请求
- 有些后端能沟通,但是某些自以为是的后端,沟通不了(服)
- 但是活要干,接口要对接,那就找其他办法吧
那我们该怎么做呢?我找到一个插件 @microsoft/fetch-event-source
- 首先安装依赖
npm install @microsoft/fetch-event-source
- 在项目中使用,建议在二次封装axios的地方封装一下,或者在封装公共方法的文件中封装一下
- 我是在utils文件中封装的,也就是封装公共方法的文件里
import { fetchEventSource } from "@microsoft/fetch-event-source";
// SSE post请求
const controller = new AbortController();
const signal = controller.signal;
/*
* url 接口地址
* params 参数
* sCB 成功回调
* eCB 失败回调
*/
export const sseRequset = (url, obj, sCB, eCB) => {
fetchEventSource(url, {
method: "POST",
signal: signal,
headers: {
"Content-Type": "application/json",
Accept: "*/*",
},
body: JSON.stringify(obj),
onmessage(msg) {
sCB(msg);
},
onerror(err) {
// 必须抛出错误才会停止
eCB(err);
throw err;
},
});
};
- 在页面中调用
import { sseRequset } from '../utils'
// 发送消息,并调用流式接口
const confirmChat = async () => {
const params = {
agentId: agentParams.agentId,
start: false,
query: chatDetail.value,
sessionId: sessionid
}
sseRequset(`${agentParams.winUrl}/${agentParams.requestUrl}`, params, (res) => {
if (res.data) {
// 成功处理
// createSseConnection(res.data)
}
}, err => {
// 错误处理
})
};
- 最后处理一下数据就行了。