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

罗根-前端

已于 2024-09-26 15:43:22 修改

阅读量4.5k

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue

于 2024-04-24 10:15:11 首次发布

本文链接：https://blog.csdn.net/qq_58946831/article/details/138147797

本文介绍了如何在Vue3项目中使用microsoft/fetch-event-source插件进行POST请求，并详细说明了页面切换时SSE请求重复发送的问题以及onopen、onclose和onerror方法的使用。同时提到了在V3+TS+Vite环境下遇到的打包问题和部分解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装插件

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);
      }
    }
  });
};