前端接收SSE数据并封装成ReadableStream返回给antdesign/pro-chat

使用fetchEventSource实现post传值

npm install --save @microsoft/fetch-event-source

import { ProChat } from '@ant-design/pro-chat';
import { fetchEventSource } from '@microsoft/fetch-event-source';

export default () => {

  const handleRequest = async(messages, config, signal) => {
     const readableStream = new ReadableStream({
        async start(controller) {
          let params = {} //参数
          const token = await getToken()
          fetchEventSource(url, {
            method: 'post',
            headers: {
            'x-DashScope-SSE': 'enable',
            'x-fag-servicename': servicename,
            'x-fag-appcode': appcode,
            'Content-Type': 'application/json',
            Authorization: `Bearer ${token}`,
            accept: 'text/event-stream',
          },
          body: JSON.stringify(params),
          //prochat会返回signal，若组件未返回可以使用AbortController对象的signal;
          //关于AbortController对象 https://blog.csdn.net/qq_45560350/article/details/130588101
          signal: signal,
          onmessage: (msg) => {
            const { data, event } = msg;
            const encoder = new TextEncoder();
            switch(event) {
              case 'message':
                const { choices, session_id, code, attachment } = JSON.parse(data);
                // enqueue 方法向流添加数据
                controller.enqueue(encoder.encode(choices[0]?.message.content));
                break;
              case 'error': 
                controller.error(errorMessage);
                break;
              case 'end':
                controller.close()
                return
            }
          },
          onerror: (err) => {
            controller.error(err);
            throw err;
          },
          })
        }
     })
     return new Response(readableStream)
  }

  return <ProChat
    request={handleRequest}
    ...
  />
}

js流式请求学习 https://zhuanlan.zhihu.com/p/705758155