sse实现post传值,使用(fetch-event-source)插件,使用vue3写法

安装插件
npm install @microsoft/fetch-event-source
引用插件
import { fetchEventSource } from "@microsoft/fetch-event-source";
具体代码: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);
      }
    }
  });
};
巨坑在页面切换时SSE请求会一直重复发送,请加上openWhenHidden: true
  1. 使用中遇到的坑,因为我使用的v3+ts+vite
  2. onopen、onclose语法报错无法打包好在我用不上
  3. onerror方法中:ctrl.signal.aborted = false; aborted打包时语法报错
注:上述问题尚未得到完美解决,那位大神如有解决访问还望告知。不甚感激!!!
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值