🧐[问题]发送消息后，点击终止按钮按钮，后端仍然从大模型API拉取信息。

[XPStone]

🧐 问题描述

💻 示例代码

🚑 其他信息

[ONLY-yours]

request 这个 api 的第三个参数是一个 signal，把这个属性传给浏览器的 sse 请求，当点击终止的时候，会停止这个 sse 的

[XPStone]

@ONLY-yours 您好，我做了以下处理，但是只能停止前端的浏览器的输出，后端模型仍然在调用，并且浏览器停止回答也有延迟

const [abortController, setAbortController] = useState<AbortController | null>(null);

<div style={{ backgroundColor: theme.colorBgLayout }}> {/* 使用主题的背景色 */}
            {showComponent && ( 
                <ProChat
                    style={{ height: '100vh', width: '100vw' }}
                    // 定义ProChat的请求处理函数
                    request={async (messages) => {
                        const controller = new AbortController(); // 创建AbortController实例
                        setAbortController(controller); 

                        const response = await fetch('/api/qwenstream', {
                            method: 'POST',
                            body: JSON.stringify({ messages: messages, stream: true }),
                            signal:controller.signal,
                        });

[ONLY-yours]

@ONLY-yours 您好，我做了以下处理，但是只能停止前端的浏览器的输出，后端模型仍然在调用，并且浏览器停止回答也有延迟

const [abortController, setAbortController] = useState<AbortController | null>(null);

<div style={{ backgroundColor: theme.colorBgLayout }}> {/* 使用主题的背景色 */}
            {showComponent && ( 
                <ProChat
                    style={{ height: '100vh', width: '100vw' }}
                    // 定义ProChat的请求处理函数
                    request={async (messages) => {
                        const controller = new AbortController(); // 创建AbortController实例
                        setAbortController(controller); 

                        const response = await fetch('/api/qwenstream', {
                            method: 'POST',
                            body: JSON.stringify({ messages: messages, stream: true }),
                            signal:controller.signal,
                        });

还是我回复的那个解决办法

  request={async (messages,_,signal) => {
  // 把这个 signal 传给 fetch 里面
   const response = await fetch('/api/qwenstream', {
                            method: 'POST',
                            body: JSON.stringify({ messages: messages, stream: true }),
                            signal:signal
                        });
}

[ONLY-yours]

我稍后补充一个关于 request 的文档吧，有一次大更新

[scoooooott]

1. 前端停止发送按钮的事件拦截部分参考 https://github.com/ant-design/pro-chat/issues/296#issuecomment-2302705223
2. 后端需要提前维护一个异步任务的Ref（比如Java中的Future），且与发送消息动作能够唯一关联（比如：Map<String,Future> ,key是发送的用户消息id，value就是调用大模型接口的异步任务的Future引用）
3. 可以在点击停止输出按钮后调用一个后端接口，这个接口负责找到对应的Future进行future.cancel(true);