在 Vue 2/vue3 中使用这个基于fetchEventSource的方法

npm install @microsoft/fetch-event-source --save
npm install whatwg-fetch --save # 可选，用于兼容旧浏览器

vue3

import { fetchEventSource } from "@microsoft/fetch-event-source";
import { getToken } from "@/utils/auth";

export const sendData = ({ content, conversationId, id }, onChunkMsg) => {
  const ctrl = new AbortController();
  // /stream-api/ai/stream
  fetchEventSource("/doc-api/report/chat-messages", {
    openWhenHidden: true,
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + getToken(),
      // "Authorization": "Bearer " + '90338409-6b68-4d1b-9d30-bd1d84479407',
    },
    body: JSON.stringify({
      query: content,
      conversationId: conversationId,
      reportId: id,
    }),
    signal: ctrl.signal,
    onopen(response) {
      // 成功连接时回调
      console.log("连接成功", response);
    },
    onmessage(msg) {
      onChunkMsg(msg, ctrl);
      // console.log("接收到消息", msg);
    },
    onerror(err) {
      console.error("连接失败", err);
      onChunkMsg('连接失败');
      // 连接失败时，关闭连接
      ctrl.abort();
      ctrl.close();
    },
  });
};

1. 语法调整：将 ES6 的箭头函数改为普通函数，更符合 Vue 2 的代码风格
2. 参数处理：显式解构参数，提高兼容性
3. 错误处理增强：添加了 HTTP 状态码检查和 onclose 回调
4. 返回控制器：让组件可以主动取消请求，方便在组件销毁时清理资源
5. 回调处理：通过回调函数与 Vue 2 组件的数据交互，符合 Vue 2 的响应式机制

vue2

// 引入必要的依赖
import { fetchEventSource } from "@microsoft/fetch-event-source";
import { getToken } from "@/utils/auth";
// 如需兼容旧浏览器，引入fetch polyfill
// import 'whatwg-fetch';

/**
 * 发送数据并处理SSE响应
 * @param {Object} params - 参数对象
 * @param {Function} onChunkMsg - 处理每个消息块的回调函数
 * @returns {AbortController} - 返回控制器以便可以中断请求
 */
export const sendData = function(params, onChunkMsg) {
  const { content, conversationId, id } = params;
  const ctrl = new AbortController();
  
  fetchEventSource("/doc-api/report/chat-messages", {
    openWhenHidden: true,
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + getToken()
    },
    body: JSON.stringify({
      query: content,
      conversationId: conversationId,
      reportId: id,
    }),
    signal: ctrl.signal,
    onopen(response) {
      console.log("连接成功", response);
      // 可以在这里添加HTTP状态码检查
      if (response.status !== 200) {
        ctrl.abort();
        onChunkMsg({ error: "连接失败，状态码：" + response.status });
      }
    },
    onmessage(msg) {
      // 在Vue 2中，建议通过回调函数将数据传递给组件
      onChunkMsg(msg, ctrl);
    },
    onerror(err) {
      console.error("连接失败", err);
      onChunkMsg({ error: "连接失败：" + err.message });
      ctrl.abort();
    },
    onclose() {
      // 连接关闭时的处理
      console.log("连接已关闭");
    }
  });
  
  // 返回控制器，方便组件在需要时中断请求
  return ctrl;
};