sse实现post传值，使用（fetch-event-source）插件，使用vue3写法

安装插件

npm install @microsoft/fetch-event-source
1

引用插件

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

具体代码:vue3

// 当前是否回答中
let showLoading = ref(false);
// 结束流时使用
let ctrl: AbortController;
const send = () => {
  showLoading.value = true;
  ctrl = new AbortController();
  fetchEventSource(import.meta.env.VITE_API_URL + "接口地址", {
    method: "POST",
    // 请求头参数
    headers: {
      enterprise_id: userStore.userInfo.enterpriseId,
      wrnc_auth: userStore.token,
      "Content-Type": "application/json"
    },
    // 具体传参
    body: JSON.stringify({
      content: q,
      titleId: formData.titleId,
      image: img,
      id: questionId
    }),
    openWhenHidden: true, // 在调用失败时禁止重复调用
    signal: ctrl.signal,
    /*onopen: function (e: any) {
      console.log("open");
    },*/
    onmessage(msg: { data: string }) {
      const res: any = JSON.parse(msg.data);
      console.log("message", res);
      showLoading.value = false;
    },
    /*onclose(e: any) {
      console.log("close");
      console.log(e);
      ctrl.abort();
      showLoading.value = false;
    },*/
    onerror(err) {
      ElMessage.error(err.msg || "询问人数过多请稍后在试！");
      console.log("error", err);
      showLoading.value = false;
      // 此方法会报错，但可以解决ts语法打包报错问题
      ctrl.signal[0].aborted = false;
      try {
      	// onerror后关闭请求，但打包是ts语法报错
        // ctrl.signal.aborted = false;
        if (ctrl) {
          ctrl.abort();
        }
      } finally {
        console.log("finally", ctrl);
      }
    }
  });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

巨坑在页面切换时SSE请求会一直重复发送，请加上openWhenHidden: true

1. 使用中遇到的坑，因为我使用的v3+ts+vite
2. onopen、onclose语法报错无法打包好在我用不上
3. onerror方法中：ctrl.signal.aborted = false; aborted打包时语法报错

注：上述问题尚未得到完美解决，那位大神如有解决访问还望告知。不甚感激！！！