// 创建一个全局的AbortController实例，用于控制本次SSE请求
let controller = null;
// 一个标志，记录是否是用户主动中止
let isUserAbort = ref(false);
// 发起SSE聊天请求的函数
const startSSEChat = async (userInput) => {
// 每次发起新请求前，先取消可能存在的旧请求
if (controller) {
controller.abort();
}
// 创建新的控制器
controller = new AbortController();
const signal = controller.signal;
// 重置状态
isUserAbort.value = false;
currentAiReply.value = true;
changeButton();
try {
const response = await fetch('/api/chat-stream', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: userInput }),
signal: signal // 关键！传入中止信号
});
// 处理流式响应...
const reader = response.body.getReader();
const decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value);
// 根据后端返回的标签信息，显示不同的内容
if (isUserAbort.value) {
reader.cancel(); // 取消读取器
break;
}
}
} catch (error) {
if (error.name === 'AbortError') {
console.log('请求已被用户中止');
} else {
console.error('请求出错:', error);
}
} finally {
currentAiReply.value = false;
changeButton();
}
};
// 用户点击“停止”按钮时触发的函数
const handleStop = () => {
isUserAbort.value = true;
if (controller) {
controller.abort(); // 关键！执行中止操作
}
// 紧接着，调用上报“终止状态”的后端接口
reportStopToBackend();
};