安装插件
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,
onmessage(msg: { data: string }) {
const res: any = JSON.parse(msg.data);
console.log("message", res);
showLoading.value = false;
},
onerror(err) {
ElMessage.error(err.msg || "询问人数过多请稍后在试!");
console.log("error", err);
showLoading.value = false;
ctrl.signal[0].aborted = false;
try {
if (ctrl) {
ctrl.abort();
}
} finally {
console.log("finally", ctrl);
}
}
});
};
巨坑在页面切换时SSE请求会一直重复发送,请加上openWhenHidden: true
- 使用中遇到的坑,因为我使用的v3+ts+vite
- onopen、onclose语法报错无法打包好在我用不上
- onerror方法中:ctrl.signal.aborted = false; aborted打包时语法报错
注:上述问题尚未得到完美解决,那位大神如有解决访问还望告知。不甚感激!!!