使用fetchEventSource
参考:https://blog.csdn.net/qq_43750656/article/details/131591198
https://zhuanlan.zhihu.com/p/686618062
首先安装:
npm install --save @microsoft/fetch-event-source
我参考各个资料写的函数:
// 流式传输处理函数export function sseRequest(url: string, data: object, successCallback: Function, closeCallback?: Function, errCallback?: Function) { const abortController = new AbortController() fetchEventSource(import.meta.env.VITE_APP_BASE_API + url, { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8', 'Accept': '*/*', 'token': localStorage.getItem('token')! }, body: JSON.stringify(data), openWhenHidden: true, // 取消visibilityChange事件 signal: abortController.signal, // AbortSignal // 按需添加此函数,不用就不添加 async onopen(response) { if (response.ok && response.headers.get('content-type') === EventStreamContentType) { return; // everything's good } else if (response.status >= 400 && response.status < 500 && response.status !== 429) { // client-side errors are usually non-retriable: throw new FatalError(); } else { throw new RetriableError(); } }, onmessage(ev) { // 每当消息推送过来时,就调用处理函数处理消息 successCallback(ev) }, onerror(err) { abortController.abort() if (errCallback) { errCallback(err) } throw err }, onclose() { abortController.abort() if (closeCallback) { closeCallback() } } })}// 调用sseRequest示例:export const beginWrite = (topic: string, styleId: string, style: string) => { const writeStore = useWriteStore() function successCallback(ev: { data: string, event: string, id: string, retry: number }) { if (ev.event === 'message') { const newStr = ev.data.replace(/_::_/g, '\n\n').replace(/_:_/g, '\n').replace(/_._/g, ' ') writeStore.sseInput += newStr } if (ev.event === 'message_end') { writeStore.sseInput = '' } } sseRequest('/knowledge/know_write', { topic, styleId, style }, successCallback)}