首页 > 其他分享 >vue实现智能问答助手sse流式请求案例

vue实现智能问答助手sse流式请求案例

时间:2024-11-14 17:11:22浏览次数:1  
标签:vue ctrl fetch 流式 中断请求 source fetchEventSource sse event

使用fetchEventSource内置api,而不是Ajax请求,响应类似于打字机一样,只能在浏览器上使用,小程序不支持;

一、下载 @microsoft/fetch-event-source

npm install @microsoft/fetch-event-source

二、项目引用

import { fetchEventSource } from "@microsoft/fetch-event-source";

三、中断会话

const ctrl = new AbortController(); // 用于中断请求 

代码

  const ctrl = new AbortController(); // 用于中断请求 
  fetchEventSource('api地址', {  
        headers: {
          "Content-Type": "application/json",
          Accept: ["text/event-stream", "application/json"],
        },
        body: JSON.stringify({
          
        }),
        method: 'POST', 
        signal: ctrl.signal,  
        openWhenHidden: true, // 页面退至后台时保持连接  
        onopen: (response) => {  
           console.log('打开连接')
        },
        onmessage: (event) => { 
          console.log('收到信息',event)
        },  
        one rror: (error) => {  
            ctrl.abort(); // 中断请求  
        },  
      })

标签:vue,ctrl,fetch,流式,中断请求,source,fetchEventSource,sse,event
From: https://www.cnblogs.com/wutong-211/p/18546410

相关文章